当使用Angular Reactive Forms创建表单时,有时候会遇到控件上的问题。一些最常见的问题是:
以下是解决这些问题的一些方法示例:
解决该问题的方式是,在表单初始化时,设置控件的初始值,如下所示:
this.form = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
message: ['']
});
可以通过在控件值变更事件中更新视图模型来解决该问题,例如:
this.form.controls['name'].valueChanges.subscribe(value => {
this.viewModel.name = value;
});
可以通过在模板中使用*ngIf
指令和FormGroup
的errors
属性来解决该问题,例如:
Name is required
可以使用FormGroup
的valid
属性来检查自定义验证是否有效来解决该问题,例如:
onSubmit() {
if (this.form.valid) {
// submit form
}
}