如何将表单控件错误消息从组件传递到在 Angular 中实现 ControlValueAccessor 的子组件？

Question

现在我使用 @Input() 将错误消息从父组件传递到实现 ControlValueAccessor 的子组件。我想知道是否有更好的方法来传递错误消息。请指导我。谢谢你

<mat-form-field class="increment">
    <input 
        matInput 
        [formControl]="_control.control"
        type="text" 
        [disabled]="disabled"
        [max]="max" 
        [min]="min"
        [errorMessage]="errorMessage" 
        [(ngModel)]="value"/>
       
</mat-form-field>

如果您知道如何做到，请告诉我

Answer 1

ControlValueAccessor 是 Angular 中一个非常有用的接口，它允许我们创建与 Angular 表单无缝协作的自定义表单控件。它提供了处理更改、触摸、验证，甚至与表单属性（例如

disabled

）交互的能力。

但是，对于错误消息，Angular 表单已经具有处理验证和错误消息的内置方法。我们可以利用它们来显示错误消息，而无需将它们传递给

@Input()

。

Angular 表单控件具有

statusChanges

和

valueChanges

属性，这是一个 Observable，每当状态或值发生变化时就会发出。对于您的情况，订阅

statusChanges

可能会有所帮助，然后在订阅中相应地处理您的错误消息。

这是一个使用反应式表单的简单示例：

export class CustomInputComponent implements ControlValueAccessor {
  control: FormControl;

  constructor() {
    this.control = new FormControl(null);
    this.control.statusChanges.subscribe((status) => {
      if (status === 'INVALID') {
        this.errorMessage = this.getErrorMessage();
      }
    });
  }

  getErrorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }
    return null;
  }

  // ... other ControlValueAccessor methods ...
}

在此示例中，我们订阅

statusChanges

并检查控件是否无效。如果无效，我们将调用

getErrorMessage()

，它将返回相应的错误消息。

ValidationService.getValidatorErrorMessage()

方法可以是您可能创建的验证服务中的静态方法，该方法根据验证错误返回适当的错误消息。这是一个简单的例子：

export class ValidationService {
  static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
    let config = {
      'required': 'This field is required',
      'invalidEmailAddress': 'Enter a valid email address',
      'minlength': `Minimum length ${validatorValue.requiredLength}`
      // Other validation messages...
    };

    return config[validatorName];
  }
}

在模板中，您可以使用

*ngIf

仅在存在错误消息时显示错误消息：

<mat-form-field class="increment">
    <input 
        matInput 
        [formControl]="control"
        type="text" 
        [disabled]="disabled"
        [max]="max" 
        [min]="min"/>
    <mat-error *ngIf="errorMessage">{{ errorMessage }}</mat-error>
</mat-form-field>

这种方法将允许您使用内置的 Angular 表单验证系统，而不是从父级传递错误消息。