angular之formgroup( 三 ) _angular表单验证

其实添加都很简单，初始化表单之后，点击确定，就可以调用ajax把数据传到后台了。那么编辑怎么做呢？其实，编辑要做的就是回显以及初始化数据之后的联动。
TS
add(){this.isVisible=true;}edit(){this.isVisible=true;}isVisible:boolean=false;//取消handleCancel(){this.isVisible = false}//确定submit() {this.isVisible = false}validForm!: FormGroup;constructor(private fb: FormBuilder){}ngOnInit(): void {this.initForm();}initForm() {this.validForm = this.fb.group({class: ['three', [Validators.required]],total: ['', [Validators.required]],man: ['', [Validators.required]],woman: ['', [Validators.required]],});}listOfData = http://www.kingceram.com/post/[{key: '1',class: '一班',total:50,man: 32,woman: 18},{key: '4',class: '四班',total:52,man: 32,woman: 20},{key: '3',class: '三班',total:26,man: 15,woman: 11}];list = [{ name: '一班', value: 'one' },{ name: '二班', value: 'two' },{ name: '三班', value: 'three' },{ name: '四班', value: 'four' },{ name: '五班', value: 'five' },{ name: '六班', value: 'six' },{ name: '七班', value: 'seven' },{ name: '八班', value: 'eight' },{ name: '九班', value: 'nine' },{ name: '十班', value: 'ten' },];clsChange(e: any) {//当班级为ten时，隐藏男生条目，并且女生条目不可编辑if (e == 'ten') {this.validForm.get('man')?.disable()this.validForm.get('woman')?.disable()}else{this.validForm.get('man')?.enable()this.validForm.get('woman')?.enable()}}
我们已经在()方法中对表单进行了启用以及禁用的逻辑判断。那么，当我们点击编辑按钮时，我们假设已经通过ajax获取到了后台返回的数据。那么我们需要赋初值了。
假设，我们编辑10班的数据，我修改一下数据后，是这样的：
但是，发现没有，当手动设置值的时候，男生人数竟然没有自动隐藏。
最后检查发现啊，是事件没有触发，但是我们知道是内置的绑定事件，在中是会被触发的。那只能说明在点击编辑按钮时，dom元素还没有渲染出来；由于我是在里初始化的表单数据，当我把其放到构造函数中发现也不行。那么我们进一步测试，把弹出框的表单独立成一个组件,如下
父组件的代码：
最后测试的过程很复杂，就不记录了，把结果告诉大家：
结论：
1 表单回显时，初始化在里面时，调用不会触发绑定在dom元素上的事件。因为在周期内，dom元素还没有绑定方法。必须在里面去调用才可以。这是第一种思维方式。就是把表单联动的逻辑绑定在dom元素上时，调用的生命周期不是
2 如果不用上面的方法，我们可以利用方法，直接监听表单数据，改变时控制其启用禁用状态从而来控制联动效果。我个人认为这样的写法比较好，层次比较分明，业务逻辑比较清晰。