angular - 我如何知道自定义表单控件何时在 Angular 中标记为原始？

Question

我的 Angular 应用程序中有几个自定义表单控件组件，它们实现了 ControlValueAccessor 接口(interface)并且运行良好。

但是，当 markAsPristine() 在父窗体上调用时，或者直接在我的自定义控件上，我需要更新它的状态:我的自定义控件实际上有内部控件，我需要调用 markAsPristine() 也在上面。

那么，我怎么知道何时在我的控件上调用了 markAsPristine()？

ControlValueAccessor 接口(interface)没有成员，与这个问题相关，我可以实现。

Answer 1

经过彻底调查后，我发现这个功能并不是 Angular 专门提供的。我有 posted an issue在关于此的官方存储库中，它已获得功能请求状态。我希望它能在不久的将来实现。

---

在那之前，这里有两个可能的解决方法:

猴子修补 markAsPristine()

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, OnInit {

  private control: AbstractControl;


  ngOnInit() {
    const origFunc = this.control.markAsPristine;
    this.control.markAsPristine = function() {
      origFunc.apply(this, arguments);
      console.log('Marked as pristine!');
    }
  }

}

使用 ngDoCheck 观察变化

请注意，此解决方案的性能可能较低，但它为您提供了更好的灵 active ，因为您可以监控原始状态何时发生更改。在上面的解决方案中，只有在调用 markAsPristine() 时才会通知您。

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, DoCheck {

  private control: AbstractControl;

  private pristine = true;


  ngDoCheck(): void {
    if (this.pristine !== this.control.pristine) {
      this.pristine = this.control.pristine;
      if (this.pristine) {
        console.log('Marked as pristine!');
      }
    }
  }

}

---

如果您需要从您的组件访问 FormControl 实例，请查看这个问题:Get access to FormControl from the custom form component in Angular .