Custom Controls with Reactive Forms

Question

I am using Angular 7, Angular Material controls with Reactive Forms.

I created custom text (matInput type=\"text\"), number (matInput type=\"number\"), select (matS

Answer 1

UPDATE Jenson-button-event find a better option, see the SO answer

Looking into your code, I see that you use Angular Material to create your custom FormControl. Well, The problem when use Angular material is how make that the "errors" appears.

When we use the error appears if the control is invalid. Take account that is invalid our custom form conrol, NOT the input-material. How avoid this inconvenience?

The solution is using a CustomFieldErrorMatcher. if we can create a CustomFiledErrorMatcher that take account the errors of our customFormControl, we can do some like

class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: FormControl) { }
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return control.dirty && this.customControl.invalid;
  }
}

Well, it's only in ngAfterView write some like

  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control as FormControl;
      })
    }
  }

Has a function

errorMatcher() {
    return new CustomFieldErrorMatcher(this.control)
  }

And create our custom-formControl.html like

    
        
            {{ option.label }}
        
    
  Required
  {{control?.errors.error}}

You can see in the stackblitz two forms, one that use a customFormControl, and another one in clasic mode