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> 

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

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

Answer 1

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

您不应该将 ngModel 与反应式表单一起使用，如果您想要反应式表单，请改用 formControlName。如果您有副作用，请订阅控件的 valueChanges 而不是使用 (input)。

此外，当设置单个输入时使用 patchValue，当设置整个表单的值时使用 setValue。

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