mat-form-field always show required red color?
Solution 1
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 | json}}</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();
}
Solution 2
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 errorCannot 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 withthis.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': ''
});
Solution 3
HTML
<mat-form-field class="floatRight"> <input matInput [formControl]="formfieldControl" placeholder="enter name"[(ngModel)]="strSolrCoreName" Required>
</mat-form-field>
.ts File
import { FormControl, Validators } from '@angular/forms';
export class abc{
formfieldControl = new FormControl( '', [Validators.required] );
}
Related videos on Youtube
Sergio Mendez
Updated on June 04, 2022Comments
-
Sergio Mendez almost 2 years
Is there any way to always show the red color of a
mat-form-field
when it have therequired="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?
-
Sunil Singh over 5 yearsshare your html code
-
Sergio Mendez over 5 years@SunilSingh I just update the question
-
Shabbir Dhangot over 5 yearsInitial observation. double quote missing after required true.
-
Edric over 5 yearsYou don't have to set the required attribute to
true
. -
Edric over 5 yearsYou could also use a custom
ErrorStateMatcher
: material.angular.io/components/input/… -
Marshal over 5 yearsPlease see revision to my answer to include a template driven scenario.
-
-
Marshal almost 4 yearsYou are using
formControl
withngModel
, which is deprecated and will be removed. Be careful here as this will break eventually.