Question

在我的Angular App中，我们有一系列输入，现在我们继续进行以下操作：

{{ item.valid }}返回false，以防所需的验证得到满足 - ＆gt; 这是正确的

如果我们执行：item.hasError('required')，则返回false - ＆gt; 这不正确

我需要使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推送到控件数组。因此，如果您遍历模板中的controls数组，您将遍历表单组。每个表单组都将无效，因为内部的某些字段是必需的，但每个表单组都没有必需的错误，因为它是组，并且您没有为所有表单组添加require检查，但是您为组内的控件执行了此操作。

尝试使用此功能 <span>{{item.get('value').hasError('required')}}</span>

ReactiveForms hasError（'required'）总是返回false

1 个答案: