Question

我已经以此方式设置了代码

errorGroup: any = FormGroup;

this.errorGroup = this.formBuilder.group({
    errors: this.formBuilder.array([])
});

对于重复/添加组中的新数据，我添加了此功能，效果很好。

addErrorGroup() {
    return this.formBuilder.group({
        error_code: ['',[Validators.required ]]            
    })
}

通过这种方式获取控件。我想听到我想念一些东西。

get f() { return this.errorGroup.controls.errors; }

在HTML

中

<select formControlName="error_code" name="error_code" (change)="errorCodeChange($event.target.value , i)">
    <option *ngFor="..." value={{...}}>{{...}}</option>
</select>
<span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>

我收到此错误。

ERROR TypeError: Cannot read property 'errors' of undefined

Answer 1

如果该错误来自HTML，那是因为您的*ngIf条件正在尝试从未定义的对象中读取值。

在渲染并检查视图时，完全有可能f（顺便说一句，您应该将该变量名称更改为更具描述性的名称，但‍♂️）尚未填充任何错误。，因此未定义。

您可以在此处执行以下两项操作之一，也可以将整个内容包装在另一个*ngIf中，以确保在访问error_code的{{1}}部分之前先填充它：

或者，您可以使用安全的导航操作符：

<span *ngIf="f && f.error_code">
    <span *ngIf="f.error_code.errors.required" class="error-msg">This is required field.</span>
</span>

请注意每个对象键后面的<span *ngIf="f?.error_code?.errors?.required" class="error-msg">This is required field.</span>。当它达到第一个null值时，它会自动消失，但由于正常失败，该应用程序继续运行。

您可以在此处了解更多信息：https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Answer 2

如果您只做下面的事情呢？

<span *ngIf="errorGroup.get('error_code').errors.required" class="error-msg">
  This is required field.
</span>

因此，通过这种方式，您无需在组件文件中使用f（）吸气剂。

如何使用数组组进行反应式验证？

2 个答案: