Доступ к массиву в модельной форме

Question

В модальной управляемой форме у меня есть несколько свойств. Одно свойство содержит массив. Я хочу, чтобы отобразить этот массив в виде таблицы:

<form class="form-horizontal" [formGroup]="reproOrderForm"> 
... 
<div class="col-md-12" formArrayName="anyArray"> 
    <table class="table table-striped table-condensed"> 
    <tr> 
     <th>col1</th> 
     <th>col2</th> 
    </tr> 
    <tr *ngFor="let elem of reproOrderForm.controls.anyArray.controls;let i = index;" [formGroupName]="i"> 
     <td>{{i+1}}</td> 
     <td>{{elem.value.anyValue}}</td> 
    </tr> 
    </table> 
</div> 
... 
</form> 

в моих component.ts я определил это:

ngOnInit() { 
    this.reproOrderForm = this.formBuilder.group({ 
    ... 
    anyArray: this.formBuilder.array([ 
     this.formBuilder.group({ 
     anyValue: [] 
     }) 
    ]) 
    }); 
} 

Мой вопрос: Можно ли получить доступ к этому массив легче, чем я сделал в мой HTML? И если так -> Как я могу это достичь?

Answer 1

Если шаблон лаконичность ваша единственная проблема, вы можете назначить myForm.controls.anyArray (или даже myForm.controls.anyArray.controls) его собственного имущества класса, например .:

export class MyComponent { 
    reproOrderForm: FormGroup; 
    formArray: FormArray; 

    ngOnInit() { 
    // Assign the array first 
    this.formArray = this.formBuilder.array([ 
     this.formBuilder.group({ 
     anyValue: [] 
     }) 
    ]); 
    // Then assign the form. 
    this.reproOrderForm = this.formBuilder.group({ 
     anyError: this.formArray 
    }); 
    } 
} 

, а затем в шаблоне:

<tr *ngFor="let elem of formArray.controls;let i = index;">...</tr>