Angular Material Hints and Error Messages for Value Components

[mdelez]

Integrate mat-hint and mat-error in the form control

[tobiasschweizer]

example how to show validator specific messages:

<span [formGroup]="form">
    <mat-form-field class="large-field">
        <input matInput [formControlName]="'intValue'" class="value" placeholder="Int value" type="number" [readonly]="mode === 'read'" [errorStateMatcher]="matcher">
        <mat-hint>integer</mat-hint>
        <mat-error *ngIf="valueFormControl.hasError('required')">
          A value is required
        </mat-error>
        <mat-error *ngIf="valueFormControl.hasError('valueNotChanged')">
          Please change value
        </mat-error>
        <mat-error *ngIf="valueFormControl.hasError('pattern')">
          Please enter a valid integer
        </mat-error>
    </mat-form-field>
    <mat-form-field class="large-field">
        <input matInput [formControlName]="'comment'" class="comment" placeholder="Comment" type="text" [readonly]="mode === 'read'">
    </mat-form-field>
</span>