Two Way Binding with Mat-Error causes ngModelChange to fire excessively - html

Question

I have a mat input field in which I bind two-way data with ngModel, I would also like to incorporate mat-error with validation using a formControl.
<mat-form-field [formGroup]="myForm">
<input matInput formControlName="myFormName" autocomplete="off"
(ngModelChange)="dataChanged(myValue)" [ngModel]="myValue">
<mat-error>
Error! Value outside <strong>{{minVal}}</strong>
and <strong>{{maxVal}}</strong>.
</mat-error>
</mat-form-field>
However this gives me an issue where ngModelChange fires multiple times when the component is initialized and the ngModel value myValue is populated with data through HTTP calls in a service. Something about mixing template driven and reactive forms?
Essentially, what I am trying to achieve is two way bind data to an input while also having mat-errors without having ngModelChange fire unnecessarily just because I populate the input with data on init.

Answer 1

You would have a form that looks something like this:
import { Component } from "#angular/core";
import {
FormGroup,
FormControl,
Validators
} from "#angular/forms";
/** #title Input with a custom ErrorStateMatcher */
#Component({
selector: "input-error-state-matcher-example",
templateUrl: "./input-error-state-matcher-example.html",
styleUrls: ["./input-error-state-matcher-example.css"]
})
export class InputErrorStateMatcherExample {
minVal = 8;
maxVal = 20;
myForm = new FormGroup({
myFormName: new FormControl("", [
Validators.minLength(this.minVal),
Validators.maxLength(this.maxVal)
])
});
}
Here, you've defined your minLength and maxLength validators.
You've also binded the form with your template using [formGroup] and formControlName directives.
So everything will be taken care of by Angular for you.
You just have to access the errors property on the myForm.controls['myFormName'] control. Something like this:
<mat-form-field [formGroup]="myForm">
<input matInput formControlName="myFormName" autocomplete="off">
<mat-error *ngIf="myForm.controls['myFormName'].errors">
Error! Value outside <strong>{{minVal}}</strong>
and <strong>{{maxVal}}</strong>.
</mat-error>
</mat-form-field>
Here's a Working Demo for your ref.