Angular6 Material custom form field control with validation errors (mat-error)

Rémi

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.

Rémi

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();
   }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 6 error show to 'mat-form-field' is not a known element:

how to clear validation errors for Angular Material mat-error

Angular/Material mat-form-field input - Floating label issues

Styling mat-form-field input in Angular/Material

Angular Material mat-form-field Placeholder text on multiple lines

Angular/Material mat-form-field custom component - matSuffix in ng-content

Why mat-error not get displayed inside mat-form field in angular material 6 withcustom global validators

reactive form custom validators not displaying the error in angular6

How to display Custom Validation error message using "app-form-group-control-validation-display" in angular 4

Angular Material: A required mat-input field does not show error when the parent form is submitted

Get validation error list of form control in angular 6

Form validation with mat-error on Angular

Angular 6 Material form reset makes Validation error appear

react material - ui text field validation : set custom error messages

Angular Material: mat-form-field must contain a MatFormFieldControl when creating a custom form field control

how to clear validation errors for mat error after submitting the form

Angular 8 - Material Auto Complete - mat-form-field

Display mat-form-field error message before control is touched

Angular Material DatePicker -- Error: mat-form-field must contain a MatFormFieldControl

mat-error not shown in angular material field

Custom form error validation in Angular-material ng-messages

Angular2 template driven forms: how to create field validation for a custom form control?

Angular Material: Custom Form Field Control - move floating label (down)

Angular Material custom form field control's value is not updated in the calling FormGroup

custom form validation errors in template

Angular material mat-form-field valid color

How do I make a angular reactive form field that uses mat-error to show validation error as soon form is loaded?

Angular Material mat-form-field modifies styling of toolbar

How to avoid extra mat-form-field-underline in angular material

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive