时间戳

首页 > 解决方案 > 角度反应形式的错误检查

angular-reactive-forms - 角度反应形式的错误检查

问题描述

关于 Angular 响应式表单中代码清洁度的一个小问题......在我们的表单中，我们经常会得到这样的片段：

<div class="alert alert-danger"
     *ngIf="formGroup.controls.openDateGroup.controls.preOpenDate.errors?.noFutureDateViolation; let errorInfo">
    Pre open ({{errorInfo.value | febDate}}) date is not in the future
</div>
<div class="alert alert-danger"
     *ngIf="formGroup.controls.openDateGroup.errors?.preOpenBeforeOpenViolation; let errorInfo">
    Pre-open date ({{errorInfo.openDate | febDate}}) may not be after open date ({{errorInfo.preOpenDate | febDate}})
</div>

有没有办法让这个片段更干净？反应式表单指令（formGroupName 和 formControlName）知道它们在树结构中的哪个级别，所以我认为应该可以以更简洁的方式进行这些检查......

标签： angular-reactive-forms

解决方案

我喜欢使用这种模式：

1）为您要检查的字段添加一个getter函数到您的组件类：

get openDateGroup() { return this.myFormGroup.get('openDateGroup'); }

2）像这样在模板中使用：

<div class="alert alert-danger" *ngIf="openDateGroup.errors?.preOpenBeforeOpenViolation; let errorInfo">
        Pre-open date ({{errorInfo.openDate | febDate}}) may not be after open date ({{errorInfo.preOpenDate | febDate}})
</div>

推荐阅读