Angular Reactive Forms - 重新初始化 FormGroup 后，启用/禁用的表单控件未正确反映在 UI 上

Question

我有一个测试角度反应表单，您可以在其中启用/禁用表单控件，并应用必需/可选验证。

我遇到了一个问题，即在重新初始化反应式表单时，FormControl 启用/禁用状态未正确反映在 UI 中。

示例设置：

first_name: AbstractControl;

constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {
    this.buildForm();
}

buildForm(): void {
    this.form = this.fb.group({
      first_name: new FormControl({ value: null, disabled: false }, [
        Validators.maxLength(10),
      ]),
    });

    this.first_name = this.form.controls.first_name;
}

默认情况下，控件是启用的，所以我有一个方法可以禁用该控件

disable(): void {
    this.first_name.disable();
}

我希望能够将此表单组重置回原始状态，因此我调用“buildForm()”和“updateValueAndValidity()”来重新初始化表单。

rebuild() {
    this.buildForm();
    this.form.updateValueAndValidity();
}

• 这会重置每个表单控件的值、验证器和启用/禁用状态。
• 表单中的所有内容似乎都已正确重置，但是启用/禁用状态未正确反映在 UI 上
• 因此，即使控件已正确重置为启用状态，UI 中的输入仍处于禁用状态。

我找到了一种解决方法，如下所示，尽管必须调用：

• 调用form.reset()，并在重新初始化表单之前将禁用状态设置回原始值。这似乎不应该是必需的。

reset() {
    this.form.reset({
      first_name: { value: '', disabled: false },
    });
}

rebuild() {
    this.reset();
    this.buildForm();
    this.form.updateValueAndValidity();
}

我会单独使用 form.reset()，但是，它不允许重新应用原始验证器，所以我必须为每个控件调用 control.setValidators。我想要一个用于初始化和重新初始化表单的逻辑。

Stackblitz link

重现：

• 默认启用输入字段
• 点击“禁用”，现在输入被禁用
• 单击“重建表单”。输入保持禁用状态，即使表单控件本身未禁用

所以，我的问题是，

• 有没有办法确保在重新初始化表单而不需要调用 form.reset() 时，输入字段正确反映控件启用/禁用状态？

Answer 1

遇到同样的问题，我不得不使用 ngAfterContentChecked() 并再次运行我的订阅。想找到真正解决问题的原因。