可能是因为表单在加载时没有被初始化。可以添加一个初始值来解决这个问题。
示例代码:
在组件中:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder} from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
name: '',
email: '',
message: ''
});
// 手动设置表单的值
this.form.setValue({
name: '',
email: '',
message: ''
});
}
}
在模板中:
在组件中,我们手动设置了表单的值为一个空对象,这样Angular就可以正确初始化响应式表单并使其有效了。
注意:setValue方法可以在OnInit方法之外的任何地方调用,但在这个例子中,我们选择在OnInit方法中调用,因为这是创建表单后的第一个生命周期钩子。