This question has a Stackblitz; stackblitz.com/edit/yz1dhz.
How can mat-form-field validation error messages be rendered when a component loads and before the user has touched the control?
class AppComponent implements OnInit {
form: FormGroup;
constructor(private readonly fb: FormBuilder) {
// Create a form in an invalid state.
this.form = this.fb.group({
a: this.fb.control(null, [Validators.required])
});
}
ngOnInit() {
// This does do what I had hoped.
this.form.updateValueAndValidity();
}
}
That code creates a form which is immediately invalid. I expected <mat-error>
to show:
<form [formGroup]="form">
<mat-form-field>
<mat-select formControlName="a">
<mat-option>Foo</mat-option>
<mat-option>Bar</mat-option>
<mat-option>Baz</mat-option>
</mat-select>
<mat-hint>I am a hint.</mat-hint>
<mat-error>{{ form.controls['a'].errors | json }}</mat-error>
</mat-form-field>
</form>
But instead the <mat-hint>
is displayed.
You can force it that way
this.form.get('a').markAsTouched();
or you can mark all controls as touched
this.form.markAllAsTouched();
you can change the status of a form control using markAsTouched, markAllAsTouched, markAsUntouched, markAsDirty, markAsPristine, markAsPending...