我试图通过反应形式添加多个记录

我有一个下拉控件 pipeMaterialName ,所选值进一步用于从对象类型数组 pipeMaterialData 获取 modElasticity 值 . 问题首先是单击 Add Record 按钮 modElasticity 值被 setValue 方法获取并显示,其中 modElasticity 是一个对象数组元素字段但添加了记录后抛出ERROR TypeError:无法读取属性'modElasticity' of undefined这是我的 typescript 文件

public pipeMaterialData=[
  {pipeMaterialName:"Polythene Soft", modElasticity:"9200000"},
  {pipeMaterialName:"Polythene Hard", modElasticity:"9200000"},
  {pipeMaterialName:"P.V.C", modElasticity:"30000000"},
  {pipeMaterialName:"Concrete", modElasticity:"2800000"},
  {pipeMaterialName:"A.C", modElasticity:"20000000000"}
]

  constructor(private fb:FormBuilder) { }

ngOnInit() {
      this.myForm = this.fb.group({
      email: '',
      phones: this.fb.array([this.getPhone()])
      });

     const formValueChange$=this.myForm.controls['phones'].valueChanges;

        formValueChange$.subscribe(phones=>{
         this.modCal(this.myForm.get('phones').value);});       
}

private getPhone(){
    return this.fb.group({
      area: [''],
      prefix: [''],
      line: [''],
      PipeMaterialName:[{pipeMaterialName:'Polythene Soft'}],
      modulusElasticity:['']
    });
}

modCal(modval: any){

    const control=<FormArray>this.myForm.controls['phones'];

         this.num =modval.length;
            this.selectedPipe=(modval[this.num-1].PipeMaterialName);
         console.log(this.selectedPipe);

                for(let i in modval){
                  let sel=modval[i].pipeMaterialName;
            console.log(modval.pipeMaterialName);
           let obj=this.pipeMaterialData.filter((m) => m.pipeMaterialName == this.selectedPipe);
            console.log(obj);
           this.modDetails=obj;
           console.log(this.modDetails);
           let mod=this.modDetails[i].modElasticity;
          control.at(+i).get('modulusElasticity').setValue(mod,{onlySelf:true,emitEvent:false});
              }
}

addPhone() {
    const control=<FormArray>this.myForm.controls['phones'];
    control.push(this.getPhone());
 }

这是一个相应的 HTML 片段

<div formArrayName="phones">

  <div *ngFor="let phone of myForm.controls.phones.controls; let i=index" [formGroupName]="i">


      <mat-form-field class="xs">
          <input matInput placeholder="area" formControlName="area">
      </mat-form-field>

      <mat-form-field class="xs">
          <input matInput placeholder="prefix" formControlName="prefix">
      </mat-form-field>

      <mat-form-field class="sm">
          <input matInput placeholder="line" formControlName="line">
      </mat-form-field>

      <select id="PipeMaterialName" placeholder="pipe Material Name" class="xs" formControlName="PipeMaterialName">
        <option *ngFor="let pipenm of pipeMaterialHead" [ngValue]="pipenm">
            {{pipenm}}
        </option>
      </select>

      <mat-form-field class="sm">
          <input matInput placeholder="modulusElasticity"formControlName="modulusElasticity">

           </mat-form-field>

      <button mat-raised-button color="warn" *ngIf="myForm.controls.phones.controls.length>1" 
          (click)="deletePhone()">Delete</button>

  </div>
<button mat-raised-button color="primary" (click)="addPhone()">Add 
 Record</button>