带有验证错误的 Angular6 Material 自定义表单字段控件（mat-error）

Question

How to make a Material custom form field control ( like this one ) to support form validation and display them with mat-error? I understand that the regular matInput directive uses ErrorStateMatcher ( doc ) but I don't understand how I can link it with a custom form field.

Answer 1

By looking at some existing component from Material2 ( https://github.com/angular/components/blob/master/src/material/select/select.ts ), I found a solution. I created a base class following this example

export const _MatSelectMixinBase:
CanDisableCtor &
HasTabIndexCtor &
CanDisableRippleCtor &
CanUpdateErrorStateCtor &
typeof MatSelectBase =
    mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));

I had to copy from the Material repo some types like CanUpdateErrorStateCtor.

Then update my constructor to inject a ErrorStateMatcher and finally in ngDoCheck, do this:

ngDoCheck() {
   if (this.ngControl) {
      this.updateErrorState();
   }
}

Answer 2

If you followed the official guide to create a custom material form field, and you have declared ngControl in constructor:

  constructor(
    ...,
    @Optional() @Self() public ngControl: NgControl) {
    ...

    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }

all you need is:

  get errorState(): boolean {
    return this.ngControl.invalid && this.ngControl.dirty;
  }

to get validation working.

Answer 3

you can check that from the FocusMonitor in the example ,it can be something like this:

  fm.monitor(elRef.nativeElement, true).subscribe(origin => {
    if (this.parts.status === 'INVALID') {
      this.errorState = true;
    }
    this.focused = !!origin;
    this.stateChanges.next();
  });

the idea is material provide errorState , you can see that from the component's type, so whenever you change it, it will reflect on the component, hope it's help!

Answer 4

The solution is correct! Reusing of mixinErrorState from material core is the best way to handle it. I recently released a detailed video about custom form field where also gave detailed explanation to error handling in custom form fields. It might be interesting for others who understands better by watching video https://youtu.be/AZsw2nRxkBk?t=825