角反应式形式 - 启用/禁用的形式控件未在UI上正确反映在FormGroup被重新定位后

Question

I具有测试角反应性形式，您可以在其中启用/禁用表单控件，并应用所需的/可选验证。 我正在遇到一个问题，即重新定位反应性形式时，在UI中未正确反映启用formControl的状态。

示例设置：

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（）”和“ updateValueAndVality（）”以重新启动表单。

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

this RESE RESE RENSTER的值，验证器和启用/禁用状态。

任何内容似乎是正确重置的，但是，启用/禁用状态未正确反映在UI

上
结果，即使控件已正确地重置为已启用，即使输入仍在UI中被禁用。

我找到了下面显示的解决方法，尽管必须打电话：
• call form.Reset（），并在重新调整表单之前将残疾状态设置回原始值。这似乎不需要。

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

I仅使用form.Reset（），但是，它不允许重新使用原始验证器，因此我必须调用每个控件的控制validators.setValidators。我想拥有一块逻辑来初始化和重新定位表单。

stackblitzlink

繁殖：

默认情况下启用了输入字段

单击“禁用”，现在禁用输入

单击“重建形式”。即使表单控件本身并未禁用表单控制本身，该输入仍保持禁用

，我的问题是，

有一种方法可以确保输入字段正确反映启用/禁用状态的输入字段，而无需调用form.Reset（）？

• 涉足同一问题，我必须使用
ngAfterContentChecked()
• 并再次订阅。 我想找到真正解决的原因。

由于Angular v.15：

Https：//github.com/angular/angular/angular/issues/48561

每当您应该使用参数导入ReactiveFormSmodule时，请在形式控件上调用SetDisabledState：
ReactiveFormsModule.withConfig({ callSetDisabledState: 'always' })

Answer 1