使用 formcontrol.setError() 将错误传播到自定义控件组件

Question

我已经使用 Angular 提供的 controlValueAccessor 接口创建了一个自定义表单控件组件。

现在我正在使用这样的自定义组件。

家长：

<custom-control [formControl]="customControl"></custom-control>

它工作正常，符合预期。当我尝试运行 setErrors 方法时出现问题，因为我希望错误传播到自定义组件，以便我可以显示从组件外部发送的错误。

当我这样做时，在使用 custom-control 的父组件中：

someValidation() {
  this.customControl.setErrors({
    myError: true
  })
}

在我的自定义控件组件的模板中，我可以看到这个

<form [formGroup]="form">
  <div> {{form.errors}} </div> <!-- I want to be able to propage 'myError' here -->
</form>

有什么建议吗？

Answer 1

我认为您可以像这样在 custom-component（实现 ControlValueAccessor）中注入当前 FormControl 实例：

// inside `custom-component`

get errors () {
  return this.ctrl.errors;
}

constructor (private ctrl: NgControl) { }

这个解决方案是基于howFormControl指令实现的：

constructor(
      /* ... validators ... */
      @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
      /* ... */) {
    super();
    this._rawValidators = validators || [];
    this._rawAsyncValidators = asyncValidators || [];
    this.valueAccessor = selectValueAccessor(this, valueAccessors);
  }

如果您想阅读有关 Angular 表格的更多信息，我建议您查看 A thorough exploration of Angular Forms。

使用 formcontrol.setError() 将错误传播到自定义控件组件

Using formcontrol.setError() to propagate error to a custom control component

angular

controlvalueaccessor