I'm facing an issue where the fields are being validated as soon as I open the page without even typing anything. All the fields appear in red from the beginning, making it difficult for me to input any information.
https://i.sstatic.net/l5TGH.png
primaryFormGroup = new FormGroup({});
primaryFirstName = new FormControl('', [Validators.required]);
ngAfterViewInit(): void {
this.primaryFormGroup.addControl('primaryFirstName', this.primaryFirstName);
this.formGroupPersonalInfo.addControl('primaryFormGroup', this.primaryFormGroup);
}Html
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="10px">
<mat-form-field fxFlex="25">
<input matInput name="primaryfirstname" fuse-letters-only-format [formControl]="primaryFirstName" [attr.data-name]="sel_primary_firstname_input" [(ngModel)]="applicationService.application.primaryPersonalInfo.firstName"
placeholder="First name" maxlength="12" minlength="1" required (change)="personalInfoService.searchForWordTest($event)">
<mat-hint align="end">{{primaryFirstName.value?.length || 0}} / 12</mat-hint>
<mat-error *ngIf="primaryFirstName.hasError('required')">
<div [attr.data-name]="sel_primary_firstname_req_errmsg">First name field is required.</div>
<div fxLayoutAlign="end start" fxFlex>{{primaryFirstName.value?.length || 0}} / 12</div>
</mat-error>
</mat-form-field>
</div>