Angular 反应式表单控件在错误属性为空时标记为 ng-invalid

Question

所以我有一个（Angular 10）反应形式，其中包含许多像这样的输入组件，每个都在 ngFor 循环中动态创建：

<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> 

我有一个奇怪的情况，其中一些组件实例（但不是全部）被标记为ng-invalid即使 FormControl 的error属性为空。 控件中有有效输入，验证部分保持隐藏状态，但控件本身标有ng-invalid 。 我已经验证表单显示控件具有正确的输入，而 rawvalidators 属性仅显示所需的验证器。

关于可能出了什么问题或如何进一步解决此问题的任何想法？

Answer 1

看起来像一个模板驱动的表单。

如果您想要反应形式，则不应将 ngModel 与反应式 forms 一起使用 formControlName 。 如果您有副作用，请订阅控件的 valueChanges 而不是使用（输入）。

同样在设置单个输入时使用patchValue，在设置整个表单的值时使用setValue。

在动态创建此类内容时，您可能需要在输入的父 div 上设置 formGroupName。