Angular：向在FormArray中动态添加的FormControls添加事件

Question

我正在使用Angular 4，并且正在创建一个页面，用户可以在其中创建由哈希，序列和常量值组成的格式。用户可以按任何顺序添加它们，为此，我使用FormArray

动态创建它们

HTML代码是：

 <div formArrayName="components"
    *ngFor="let c of components.controls; let i=index">
   <div [formGroupName]="i">
     <div class="form-group row">
       <div class="col-md-3">
         <select type="" id="component" class="form-control" placeholder="" 
             formControlName="component">
           <option value="Sequence">Sequence</option>
           <option value="Hash">Hash</option>
           <option value="Constant">Constant</option>
         </select>
       </div>
       <div class="col-md-2">
        <input type="number" class="form-control" formControlName="limit" />
       </div>
       <div class="col-md-4">
        <input type="text" class="form-control" formControlName="value" />
       </div>
       <div class="col-md-2" style="color:red" (click)="deleteRow(i)">
           <fa name="times"></fa>
       </div>
      </div>
    </div>
  </div>

上面的代码将产生这样的输出。

问题如何将事件与这些动态创建的控件绑定？例如，在下拉菜单中选择某个值时，我想隐藏其旁边的输入控件。

Answer 1

您可以将事件绑定到具有索引的函数，然后使用索引从函数中的formArray检索控件

在您的HTML

中

 <select type="" id="component" class="form-control" placeholder="" 
             formControlName="component" (change)="onChange(i)>

在您的ts文件中

let row = components.controls[pos] as FormGroup 
//row now contains all the controls bound to it you can access the controls like the following 
let value = row.controls["component"].value

或者，如果您只想隐藏输入而没有任何复杂的条件，则可以在HTML中进行尝试

 <input type="number" class="form-control" formControlName="limit" *ngIf="c.get('component').value != 'whatever'"/>