Мой HTML выглядит следующим образом -
<form name="add_stepform" [formGroup]="ActionTypeForm" novalidate>
<cdk-virtual-scroll-viewport [itemSize]="100" class="stepViewPort">
<div [@fadeInOut] class="TestSteps example-item"
*cdkVirtualFor="let step of listOfSteps;TemplateCacheSize:0 let i=index">
<div formArrayName="steps">
<div [formGroupName]="i">
<div class="form-group">
<label class="font16">Step Description</label>
<input id="stepDescription" type="text"
formControlName="stepDescription" class="form-control"
placeholder="ex: about the application" >
<mat-error *ngIf="stepDescription.errors?.required">
Description Required<br>
</mat-error>
</div>
</div>
</div>
</div>
</cdk-virtual-scroll-viewport></form>
.ts file -
this.ActionTypeForm = new FormGroup({
steps: new FormArray([this.testSteps()])})
testSteps() {
return new FormGroup({
stepDescription: new FormControl('', [Validators.required)}
get stepDescription(){
return ((<FormArray>this.ActionTypeForm.get('steps')).controls)[0].get('stepDescription')
}
, но проверяет только описание первого шага. Итак, есть идеи, как динамически использовать значение индекса?