CODEWITHSUNDEEP
htmlangulartypescriptangular-material
rmlarsen
rmlarsen

Reputation: 177

Angular Material's mat-error showing on one way data binding

The following mat-form-field shows the <mat-error> even though someValue is declared and defined.

<mat-form-field> <input [value]="someValue" [formControl]="someFormControl"/> <mat-error *ngIf="someFormControl.hasError('required')">Required</mat-error> </mat-form-field>

I want to be able to prefill the input with someValue without the <mat-error> showing.

Upvotes: 0

Views: 1109

Answers (1)

Laurent Schwitter
Laurent Schwitter

Reputation: 464

By the very architecture of FormControl that can't be done "automatically"... as from the moment you touch a component the formcontrol checks it... (that's the very beauty of it...)

but you can circumvent it in multiple ways... like this:

*.component.ts

someFormControl = new FormControl('', [Validators.required, Validators.email]);
someValue: String = 'aValue';
activated: Boolean = false;

ngOnInit() {
    this.someFormControl.valueChanges.subscribe((observer) => {
        this.activated=true;
    })
}

*.component.html

<mat-form-field>
    <input matInput [value]="someValue" [formControl]="someFormControl"/>
    <mat-error *ngIf="someFormControl.hasError('required') && activated">Required</mat-error>
</mat-form-field>

but it gets pretty ugly if you have a lot of input fields

Upvotes: 1

Related Questions