angular 动态form

<form [formGroup]="materialSearchForm">
      <div  [formArrayName]="'materialSearchDetails'" style="height: 50px;" *ngFor="let detail of materialFormArray.controls;let i = index">
        <div [formGroupName]="i"  class="row">
            <div style="text-align: left" class="col-md-2">
              <input kendoTextBox formControlName="materialNo" style="width:100%"/>
            </div>
            <div style="text-align: left"  class="col-md-5">
              <input kendoTextBox formControlName="materialName" style="width:100%"/>
            </div>
            <div style="text-align: left"  class="col-md-2">
              <input kendoTextBox formControlName="ZMAT" style="width:100%"/>
            </div>
            <div style="text-align: left"  class="col-md-2">
              <input kendoTextBox formControlName="BPU" style="width:100%"/>
            </div>
            <div  class="col-md-1">
              <span class="k-icon k-i-close" style="color:red;float: right;font-size: 30px;cursor: pointer" (click)="delRow(i)"></span>
            </div>
        </div>
      </div>
</form>

在module中引入ReactiveFormsModule，不然会报错

import { FormsModule,ReactiveFormsModule } from '@angular/forms';

 imports: [
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    SampleRoutingModule
  ],

 public materialSearchForm:FormGroup
  public materialFormArray:FormArray 

 constructor(private fb: FormBuilder) {
    this.materialFormArray= this.fb.array([]);
    this.materialSearchForm = this.fb.group({
      materialSearchDetails:  this.materialFormArray
    });
    this.operateFormArray();
   }

operateFormArray(index?)
{
 let formArray=this.materialSearchForm.get('materialSearchDetails') as FormArray;
 if(index!=null)
 {
  formArray.removeAt(index);
 }
 else
 {
  formArray.push(this.fb.group({
    materialNo: ['', Validators.required], 
    materialName: ['', Validators.required], 
    ZMAT: ['', Validators.required], 
    BPU: ['', Validators.required], 
   }));  
 }
 console.log(formArray.value);
}