响应式模版
- 在
app.module.ts
中导入ReactiveFormsModule
。 - 在
Component.ts
的构造器中,注入private fb:FormBuilder
,表单registerForm:FormGroup
在构造器中赋值。
constructor(private fb:FormBuilder) {
this.registerForm=fb.group({
username:['',[Validators.required,Validators.minLength(6),Validators.maxLength(12)]],
password:['',[Validators.required,Validators.minLength(6),Validators.maxLength(11)]]
});
}
- 在
html
中,需要在form
元素绑定你的信息:[formGroup]="registerForm"
。
<form [formGroup]="registerForm">
<div>
<label>用户账号</label>
<input formControlName="username">
</div>
<div>
<label>设置密码</label>
<input type="password" formControlName="password">
</div>
</form>