在Angular 7中,可以使用FormGroup和FormControl来创建嵌套表单。当一个嵌套表单被触碰(即,当用户与其交互并修改了任何控件的值)时,它将会被标记为"dirty"。当用户点击父表单的按钮时,如果嵌套表单的任何控件被触碰过,则父表单的按钮应该被禁用。
下面是一个解决这个问题的示例代码:
在父组件中,创建一个FormGroup对象,并在其中包含一个FormControl对象来表示按钮的状态:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-parent-form',
template: `
`
})
export class ParentFormComponent {
parentForm: FormGroup;
constructor() {
this.parentForm = new FormGroup({
name: new FormControl('')
});
}
}
在子组件中,接收父组件传递的FormGroup对象,并监听它的valueChanges事件。当嵌套表单被触碰时,将设置一个触碰标志(例如,isTouched):
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-child-form',
template: `
`
})
export class ChildFormComponent {
@Input() parentForm: FormGroup;
get childForm() {
return this.parentForm.get('childForm');
}
ngOnInit() {
// 监听valueChanges事件
this.childForm.valueChanges.subscribe(() => {
// 设置触碰标志
this.childForm.markAsTouched();
});
}
}
在上述示例代码中,当子表单的任何控件的值发生变化时,订阅了valueChanges事件,并在回调函数中设置了触碰标志。然后,通过在父组件的按钮上绑定[disabled]属性,根据父表单的valid属性和子表单的触碰标志来禁用按钮。
请确保在模块中正确导入和声明表单模块(FormsModule或ReactiveFormsModule)。