如何访问组件中 FormArray 内定义的 HTML 中的控件 - Angular2 [英] How to access control in HTML defined inside FormArray in component - Angular2

问题描述

我在我的应用中使用 ReactiveFroms.当我添加 static 控件时，一切正常.我正在使用 controls 的 inbuilt 类显示 validation 错误.使用静态控件Plunkr.

但是当我尝试添加 dynamic 控件时，我无法访问控件以应用 inbuilt 验证.

我在从 HTML 模板 访问控制 reference 以应用验证时遇到问题.我不知道如何访问控件.这是 plunkr.

这是我添加动态控件的模板:

 
<legend>银行详细信息</legend><字段集><div class="form-group"><label class="col-sm-2 control-label">银行名称</label><div class="col-sm-6"><input class="form-control" type="text" placeholder="输入银行名称" formControlName="bankName" [formControl]="valForm.controls['banks']"/><span class="text-danger" *ngIf="valForm.controls['bankName'].hasError('required') && (valForm.controls['bankName'].dirty || valForm.controls['bankName'].touched)">此字段是必填字段</span>

</fieldset>

<button (click)="addNewBank()">添加新银行</button></表单>

我不知道如何访问 formControl 以添加验证.我尝试了各种方法，例如:

 valForm.controls['banks'][bankName];//不工作valForm.controls['banks'][0][bankName]//不工作<input class="form-control" type="text" placeholder="输入银行名称" formControlName="bankName" [formControl]="valForm.get('bankName')"/><span class="text-danger" *ngIf="valForm.controls['bankName'].hasError('required') && (valForm.get('bankName').dirty || valForm.get('bankName').touched)">此字段是必填字段</span>//不工作

这里是 plunker.

解决方案

我看到了几个选项

valForm.get(['banks', i, 'bankName'])valForm.get('banks.' + 'i' + '.bankName')bankArray.get([i, 'bankName'])bankArray.get(i + '.bankName')bankArray.at(i).get('bankName')

I am using ReactiveFroms in my app. When I added static controls then every thing is working fine. I am showing validation errors using inbuilt classes of controls. Working Plunkr with static controls.

But when I try to add dynamic controls then I am not able to access controls in order to apply inbuilt validation.

I am facing problem in accessing control reference from HTML template in order to apply validation. I am not able to figure it out how can I access controls. Here is the plunkr for that.

Here is my template for adding dynamic controls:

  <form [formGroup]="valForm" class="form-validate form-horizontal"  >
<div formArrayName="banks">
     <div *ngFor="let bank of bankArray.controls;let i = index" [formGroupName]="i">
        <legend>Bank Details</legend>
    <fieldset>
        <div class="form-group">
            <label class="col-sm-2 control-label">Name of the Bank</label>
            <div class="col-sm-6">
                <input class="form-control " type="text" placeholder="Enter Bank Name" formControlName="bankName" [formControl]="valForm.controls['banks']" />
                <span class="text-danger" *ngIf="valForm.controls['bankName'].hasError('required') && (valForm.controls['bankName'].dirty || valForm.controls['bankName'].touched)">This field is required</span>
            </div>
        </div>
    </fieldset>
    </div>
 </div>
 <button (click)="addNewBank()">Add New Bank</button>
 </form>

I am not able to figure it out how I can access formControl in order to add validations. I tried various approach like:

       valForm.controls['banks'][bankName]; //Not working
       valForm.controls['banks'][0][bankName] //Not working

         <input class="form-control " type="text" placeholder="Enter Bank Name" formControlName="bankName" [formControl]="valForm.get('bankName')" />
                <span class="text-danger" *ngIf="valForm.controls['bankName'].hasError('required') && (valForm.get('bankName').dirty || valForm.get('bankName').touched)">This field is required</span> //Not working

Here is the plunker for that.

解决方案

I see several options

valForm.get(['banks', i, 'bankName'])
valForm.get('banks.' + 'i' + '.bankName')

bankArray.get([i, 'bankName'])
bankArray.get(i + '.bankName')

bankArray.at(i).get('bankName')

这篇关于如何访问组件中 FormArray 内定义的 HTML 中的控件 - Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！