错误TypeError:无法读取角度6中未定义的属性'modElasticity'

时间:2018-12-10 10:43:00

标签: angular forms typescript dynamic reactive

我正在尝试通过反应形式添加多个记录

enter image description here

我有一个下拉控件pipeMaterialName,该控件进一步使用所选值从对象类型数组modElasticity中获取pipeMaterialData值。    问题首先出现在单击Add Record按钮modElasticity之前,并通过setValue方法获取并显示了值,其中modElasticity是对象数组元素字段,但是在添加记录后抛出错误TypeError :无法读取未定义的属性“ modElasticity”    这是我的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>

0 个答案:

没有答案