Angular的响应式表单使用FormControl来追踪表单控件的值和状态变化。可以通过订阅表单控件的valueChanges或statusChanges来检测表单的变化。下面是一个示例解决方案:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`,
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required]
});
this.myForm.valueChanges.subscribe(value => {
console.log('Form value changed:', value);
});
this.myForm.statusChanges.subscribe(status => {
console.log('Form status changed:', status);
});
}
submitForm() {
if (this.myForm.valid) {
console.log('Form submitted!');
} else {
console.log('Form is invalid!');
}
}
}
在上面的示例中,我们首先使用FormBuilder创建了一个名为myForm的FormGroup,并在其中定义了一个名为name的FormControl。然后我们分别订阅了myForm的valueChanges和statusChanges事件,并在回调函数中输出了相关信息。
当表单的值或状态发生变化时,相关的回调函数将被触发,并且可以执行一些操作。在submitForm方法中,我们检查表单是否有效,并根据结果执行相应的操作。
请注意,上述示例中的代码是基于Angular的版本5或更高版本。如果你使用的是较旧的Angular版本,可能需要进行一些调整。