ОШИБКА TypeError: Невозможно прочитать свойство 'modElasticity' из неопределенного в угловом 6 - PullRequest
Новая
       24

ОШИБКА TypeError: Невозможно прочитать свойство 'modElasticity' из неопределенного в угловом 6

0 голосов
/ 10 декабря 2018

Я пытаюсь добавить несколько записей через реактивные формы

enter image description here

У меня есть раскрывающийся элемент управления pipeMaterialName, что выбранное значение используется далееполучить значение modElasticity из массива типа объекта pipeMaterialData.Сначала проблема заключается в том, что до нажатия кнопки Add Record кнопка modElasticity выбирается и отображается методом setValue, где modElasticity - это поле элемента массива объектов, но после добавления записи выдается ОШИБКА TypeError: Невозможно прочитать свойство 'modElasticity' из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>
...