Myujth

Is there any way to always show the red color of a mat-form-field when it have the required="true", even if I never set the focus on it or I touched it?

<mat-form-field color="accent">
 <input matInput placeholder="ID is required" required="true [(ngModel)]="uniqueID">
</mat-form-field>

I just want to show the red color of the error but from the beginning, before I even touch the input.

How Is it posible?

The following demo shows the required case in an existing angular material reactive form.

Application Demo :
https://stackblitz.com/edit/example-angular-material-reactive-form-2rksrw?file=app/app.component.ts

Approach :

• In ngOnInit, we can get the input element from the form and can modify as
  this.formGroup.get('name').markAsTouched();
  


• We can also exploit the touched property of the from input as
  this.formGroup.get('name').touched = true;, but this will generate an error Cannot assign to 'touched' because it is a constant or a read-only property.
  But in the stackblitz demo, you can see it working as we can see the difference with this.formGroup.get('name').touched = false; also.

The formGroup is created in following manner in the demo form :

 this.formGroup = this.formBuilder.group(
 'email': [null, [Validators.required, Validators.pattern(emailregex)]],
 'name': [null, Validators.required],
 'password': [null, [Validators.required, this.checkPassword]],
 'description': [null, [Validators.required]],
 'validate': ''
 );

If you are willing to use reactive forms... using ngAfterViewInit, you could programmatically mark the field as touched to force the error.

• 
  

  Unfortunately I am not familiar with how to accomplish this via
  template driven forms.

  
  
  

  setTimeout(() => 
   this.yourForm.controls['yourControl'].markAsTouched();
   , 0);
  

  
  

Revision

Based on my original answer, and the expansion of my answer by Abhishek to re-enforce that you can do this with reactive forms... I wanted to provide the template driven form scenario as well.

• The common theme here, regardless if you use reactive forms or template driven forms is that, you need to programmatically mark the
  input as touched...


• In template driven forms you will also need to do
  the same via template reference so that you can call the markAsTouched() method on the control in
  your ngOnInit life cycle hook.

Set a template reference of id and bind it to ngModel via #id="ngModel" on the input... you will also need to assign a name on the input of id via name="id" this is a requirement of binding to ngModel.

<mat-form-field color="accent">
 <input matInput placeholder="ID is required" required="true" [(ngModel)]="uniqueID" name="id" #id="ngModel">
</mat-form-field>

<div *ngIf="id.invalid && (id.dirty || id.touched)">
 <mat-error *ngIf="id.errors.required">
 ID is <strong>required</strong>
 </mat-error>
</div>

<pre>id.errors: id.errors </pre>

From here you will need to use @ViewChild in your component to get reference to #id and call markAsTouched() on the control via ngOnInit life cycle hook.

import Component, OnInit, ViewChild from '@angular/core';

@ViewChild('id') _id : any

ngOnInit()
 this._id.control.markAsTouched();