使用模板驱动验证进行验证

时间:2018-03-14 10:07:40

标签: angular validation templates

使用angular5我正在开发一个应用程序。我有一个显示的标签列表,用户可以更改该值,然后点击应该更新的保存。我正在使用模板驱动的验证。问题在于我通过附加增量值i(标记{{i}})为每个字段指定了唯一的名称。但它完美地运作。但是如果我需要在触摸时显示验证错误,那么语法为formname.form.controls.controlname.errors.required但是我无法直接提供controlname,因为我使用递增值附加字符串作为名称。到目前为止我的代码是,



<form #tagRuleForm="ngForm">
<div class="tables" [dragula]='"tag-bag"'>
<div class="rows" *ngFor="let tagRuleList of tagRulesList; let i = index"  [class.active]="isSelected(tagRuleList.tagRuleId)" >
<div class="cells1">
     <input name="tag{{i}}" [(ngModel)]="tagRuleList.tag"  minlength = "2" maxlength="1000" required >
   <div *ngIf="!tagRuleForm.form.valid && (tagRuleForm.controls.tag{{i}}.touched ||tagRuleForm.controls.tag{{i}}.dirty )"
                  class="alert alert-danger">
     <div *ngIf="tagRuleForm.controls.tag{{i}}.errors.required">
         Field can't be blank
     </div>
   </div>
</div>
</div>

 <button type="submit" class="btn btn-success"
    [disabled]="!tagRuleForm.form.valid" (click)="save()"  > 
      Submit
 </button>
</form>
&#13;
&#13;
&#13;

在模板驱动验证的情况下,我们如何做到这一点。

1 个答案:

答案 0 :(得分:0)

试试这个

<div *ngIf="tagRuleForm.controls['tag' + i].errors.required">