如何解决TS和HTML之间的FormGroup绑定
我第一次尝试在Angular中创建一个反应式表单
这是代码:
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormControl } from "@angular/forms";
@Component({
selector: 'app-username-password',templateUrl: './username-password.component.html',styleUrls: ['./username-password.component.scss']
})
export class UsernamePasswordComponent implements OnInit {
loginForm = new FormGroup({
userName : new FormControl("Ashish"),password : new FormControl("")
});
// constructor() { }
ngOnInit() {
}
}
和HTML
<div class="container">
<h2>Login Form</h2>
<form [formGroup]="loginForm">
<label> User Name</label>
<input formControlName="userName",type="text",class="form-control">
</form>
{{loginForm.value | json}}
</div>
HTML没有显示任何内容。
其中有错误吗?
关于, 灰烬
解决方法
您需要将ReactiveFormsModule
导入组件所在的AppModule
或特定模块中
例如:
...
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
imports: [
...,ReactiveFormsModule,...,],declarations: [...],bootstrap: [AppComponent]
})
export class AppModule {}
,
import { Component,OnInit } from '@angular/core';
import { FormGroup,FormControl } from "@angular/forms";
@Component({
selector: 'app-username-password',templateUrl: './username-password.component.html',styleUrls: ['./username-password.component.scss']
})
export class UsernamePasswordComponent implements OnInit {
loginForm: FormGroup;
// constructor() { }
ngOnInit() {
this.loginForm = new FormGroup({
userName : new FormControl("Ashish"),password : new FormControl("")
});
}
}
,
从错误中看来,您似乎没有将ReactiveFormsModule
导入包含此组件的模块中。
您应像这样将ReactiveFormsModule
添加到app.module.ts
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule,ReactiveFormsModule],declarations: [ AppComponent ],bootstrap: [ AppComponent ]
})
export class AppModule {
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。