Currently, I am working on an (Angular 10) reactive form that includes multiple dynamically-created input components within an ngFor loop. Here is an example of one of these input components:
<div [id]="this.getDivElementId()" class="textinput dynControl" [formGroup]="this.parentFormRef" >
<input [name]="this.controlData.name" [id]="this.controlData.name" type="text" [attr.aria-labelledby]="this.getLabelElementId()" [attr.aria-required]="this.controlData.required" [required]="this.controlData.required" [readOnly]="this.controlData.readOnly"
(input)="onValueChange($event)" [maxlength]="this.controlData.maxLength" [placeholder]="this.controlData.placeholder" [pTooltip]="this.controlData.tooltip" pInputText [formControlName]="this.controlData.name">
<label [for]="this.getLabelElementId()" [id]="this.getLabelElementId()" [attr.data-required]="this.controlData.required">{{this.label}}</label>
</div>
<div class="validationFeedback">
<small *ngIf="this.controlRef?.errors?.required && (this.controlRef?.touched || this.controlRef?.dirty)"
class="ng-invalid p-invalid">
{{this.getRequiredFieldValidationMsg()}}
</small>
</div>
I have encountered a strange issue where some instances of these components are being incorrectly marked as ng-invalid, despite their FormControl's error property being empty. These affected controls contain valid input and the validation section remains hidden, but they are labeled as ng-invalid. Upon further investigation, I have confirmed that the control contains the correct input and only has the required validator in its rawvalidators property.
If you have any insights into what might be causing this issue or suggestions on how to troubleshoot it further, please let me know!