ReactiveForms hasError('required') 总是返回 false

Question

在我的 Angular 应用程序中，我们有一组输入，现在我们正在进行以下操作：

{{ item.valid }} returns false 如果满足要求的验证 -> 正确

如果我们这样做：item.hasError('required') 它 returns 错误 -> 那是不正确的

我需要什么才能使 hasError 方法起作用？

这就是我们构建响应式表单的方式：

private buildForm(prices: Array<Price>, arrayName: string): FormArray {
    let controls = new FormArray([]);

    prognoseAngaben.forEach(price => {
      controls.push(new FormGroup(
        {
          value: new FormControl(price.value, [Validators.required, Validators.min(0)]),
        }));
    });

    this.myForm.setControl(arrayName, controls);

    return controls;
}

那是我们的 HTML:

<tbody [formArrayName]="arrayName">
    <tr *ngFor="let item of myForm.controls[arrayName].controls; let i = index">
        <ng-container [formGroupName]="i">
            <kendo-numerictextbox [formControlName]="'value'" [format]="'n0'" [decimals]="0" [spinners]="false" [min]="0"></kendo-numerictextbox>
        <span>{{item.hasError('required')}}</span>
        <span>{{item.valid}}</span>
        </ng-container>
    </tr>
</tbody>

我错过了什么？

编辑：

我用答案创建了一个 Plunker：

https://plnkr.co/edit/l7gyONd4pLqqWGLGVjyb?p=preview

Answer 1

在您的实现中，您将 FormGroups 推送到控件数组。因此，如果您遍历模板中的控件数组，您将遍历表单组。每个表单组都将无效，因为内部的某些字段是必需的，但每个表单组都没有必需的错误，因为它是组并且您没有为所有表单组添加 require 检查，但是您为组内的控件添加了它。

试试用这个 <span>{{item.get('value').hasError('required')}}</span>

ReactiveForms hasError('required') 总是返回 false

ReactiveForms hasError('required') always returning false

angular

angular-reactive-forms