Angular: 禁用子控件更新父窗体 Pristine 状态

Question

我有一个 angular 这样的表格

this.form = this._fb.group({
     details: this._fb.group({
         originId: [null, Validators.required],
         
         ... some more child controls
     }),
     ... some more child controls      
});

在 ngOnInit() 满足某些条件时，我将表格标记为脏和触摸，像这样

this.form.markAsDirty();
this.form.markAsTouched();

在这之后我得到 this.form.isPristine 作为 false 这是正确的，这就是我想要的。

然后我像这样禁用控制originId来禁用originId

this.form.get('details').get('originId').disable();

但问题是，一旦我禁用 originId，它就会将父表单的原始状态更新为 true，所以这个 this.form.isPristine 变成了 true 而我没有想要。

我不明白为什么设置子控件会更新父窗体的原始状态。

谁能指出这里出了什么问题？

Answer 1

AbstractControl.disable 方法将禁用标志作为其默认行为传播给所有直接祖先，在您的情况下，这会导致您的整个表单被标记为禁用。

参见：https://angular.io/api/forms/AbstractControl#disable

要解决此问题，请在禁用选项对象中包含 onlySelf: boolean 属性。

this.form.get('details').get('originId').disable({onlySelf: true});

Angular: 禁用子控件更新父窗体 Pristine 状态

Angular: Disabling child control updating the parent form Pristine status

angular

angular-forms