角度材料 – 具有错误状态的自定义反应式控件

我正在关注创建自定义表单控件的Angular Material网站上的 this tutorial.在有验证错误时,教程中没有关于如何遵守表单控制错误的示例.

定制text.component.html

<mat-form-field class="example-full-width">
    <mat-SELEct [placeholder]="placeholder" #SELEct [formControl]="control">
        <mat-option *ngFor="let food of foods" [value]="food">
            {{fooD}}
        </mat-option>
    </mat-SELEct>
    <mat-error>This is required.</mat-error>
</mat-form-field>

定制text.component.ts

import { Component,ViewChild,HostBinding,Input,ChangeDetectionStrategy,Optional,Self,Docheck,OnInit,NgZone } from '@angular/core';
import { ControlValueAccessor,NgControl,NgForm,FormGroupDirective,FormControlDirective,FormControlName,FormControl,FormBuilder } from '@angular/forms';
import { MatFormFieldControl,MatSELEct,CanupdateErrorState,ErrorStateMatcher } from '@angular/material';

@Component({
    SELEctor: 'custom-text',templateUrl: './custom-text.component.html',styleUrls: [
        './custom-text.component.scss'
    ],providers: [
        {
            provide: MatFormFieldControl,useExisTing: CustomTextComponent
        }
    ],changeDetection: ChangeDetectionStrategy.onPush
})
export class CustomTextComponent implements ControlValueAccessor,Docheck {

    @input()
    foods: String[];

    @input()
    get errorStateMatcher(): ErrorStateMatcher {
        return this.SELEct.errorStateMatcher;
    }
    set errorStateMatcher(val) {
        this.SELEct.errorStateMatcher = val;
    }

    @input()
    get placeholder() {
        return this.SELEct.placeholder;
    }
    set placeholder(plh) {
        this.SELEct.placeholder = plh;
        this.stateChanges.next();
    }

    @input()
    get value() {
        return this.SELEct.value;
    }
    set value(val) {
        this.SELEct.value = val;
        this.stateChanges.next();
    }

    @ViewChild('SELEct')
    SELEct: MatSELEct;

    control: FormControl;

    constructor(
        @Optional() @Self() ngControl: NgControl,@Optional() private _controlName: FormControlName) {
        if (ngControl) {
            ngControl.valueAccessor = this;
        }
    }

    ngOnInit(): void {
        this.control = this._controlName.control;
    }

    ngDocheck(): void {
        this.SELEct.updateErrorState();
    }

    writeValue(obj: any): void {
        this.value = obj;
    }
    registerOnChange(fn: any): void {
        this.SELEct.registerOnChange(fn);
    }
    registerOnTouched(fn: any): void {
        this.SELEct.registerOnTouched(fn);
    }
    setDisabledState?(isDisabled: Boolean): void {
        this.SELEct.setDisabledState(isDisabled);
    }


}

app.component.html

<div style="text-align:center">
  <form class="example-form" [formGroup]="myForm" (submit)="submitForm()">
    <custom-text [foods]="[null,'burger','spaghetti','fries']" 
      formControlName="SELEctedFood" 
      [errorStateMatcher]="matcher"></custom-text>
    <button>Submit</button>
  </form>
</div>

基本上,我将FormControlName实例注入自定义控件.

constructor(
    @Optional() private _controlName: FormControlName) {
....
ngOnInit(): void {
    this.control = this._controlName.control;
}

然后我将它的控件属性绑定到内部mat-SELEct控件中.

<mat-SELEct [placeholder]="placeholder" #SELEct [formControl]="control">

然后我在NgDocheck中调用this.SELEct.updateErrorState.

这是StackBlitz的链接：
https://stackblitz.com/edit/angular-c4ufpp

是否有更好或更标准的方法？

import { NG_VALIDATORS,NG_VALUE_ACCESSOR,Validator,Validators } from'@angular/forms';
..other imports
    @Component({
      ...
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,useExisTing: forWARDRef(() => YourComponent),multi: true
        },{
          provide: NG_VALIDATORS,multi: true,}
      ]
    })

       validate(c: AbstractControl): ValidationErrors | null {
        ... put your validation check in here and return null if it´s valid
      }