angular - 反应式表单没有标记为无效，即使它的控件被标记为无效，为什么？

Question

有一个表格“myForm”，它的一个孩子被称为“myChildren”。当“myChildren”控件无效时：

预期行为：当任何孩子无效时，父母也应标记为无效。

myForm.invalid // true
myForm.controls.myChildren.invalid // true

实际行为： “myChildren”状态不会冒泡到其父级，并且表单被标记为 VALID，即使其控件之一被标记为 INVALID

myForm.invalid // false
myForm.controls.myChildren.invalid // true

为什么它的工作方式不同？如何保持状态同步（如果任何子控件或大子控件被标记为无效，则应将整个表单标记为无效）

标签： angularangular-reactive-forms

Answer 1

问题是由创建子控件的方式引起的。

 // this works as expected (form im marked invalid when myControl becomes invalid
 this.form.addControl('myControl', this.fb.control(undefined)) 

 // this does not work as expected (validation does not bubble up)
 this.form.controls = {myControl: this.fb.control(undefined) }