patchValue теперь работает, инициализируя значения FormArray

Question

У меня есть таблица денежных потоков.Каждый cashFlow имеет переменное количество периодов.когда я нажимаю на денежный поток, я пытаюсь заполнить компонент, чтобы можно было редактировать значения периода.Название денежного потока и даты начала / окончания заполняются.У меня есть массив периодов, у меня есть текстовые поля для каждого периода.

Я не могу получить начальные значения для отображения в текстовых полях.
Я пытаюсь получить patchValue или setValueна работу.

Я внимательно рассмотрел 12 предложенных вопросов, связанных с SO.Один дал мне идею попробовать, но в конечном итоге это не решило мою проблему.

Вот cashFlowDetailComponent.ts

 import { Component, OnInit , Input, Output, ElementRef} from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import {cashFlow, cashFlowPeriod} from '../cashflow'
import { IMyDpOptions, IMyDateModel, IMyDate } from 'mydatepicker';


@Component({
  selector: 'app-cashflow-detail',
  templateUrl: './cashflow-detail.component.html',
  styleUrls: ['./cashflow-detail.component.css']
})
export class CashflowDetailComponent implements OnInit {



  myFormGroup: FormGroup;
  myCashFlow: cashFlow;


  constructor(private fb: FormBuilder) { 

   }

    //called by parent component when cashFlow is clicked.
  buildForm(cf_: cashFlow): void {
    //return;
    this.myFormGroup = null;
    this.myCashFlow = cf_;
    if (cf_ == null) { return;}
    const a :FormArray = this.fb.array([]); 



    this.myCashFlow.periods.forEach(cfp => {

      a.push(this.cfpGroup(cfp));
    })

     //set up the form w/ header controls, add in the periods array
    this.myFormGroup = this.fb.group({
      cashFlowName: this.myCashFlow.cashFlowName,
      startDate: this.threePartDateFromDate( this.myCashFlow.startDate),
      endDate: this.threePartDateFromDate( this.myCashFlow.endDate),
      periods:a
    });



       this.myFormGroup.controls['periods'].controls[i].controls['value1'].setValue(this.myCashFlow.periods[i].value1);
    //}



  }//end of buildform

  //return a simple FormGroup , this will cause 'periods' to be an FormArray of FormGroups,  each w/ 1 control
  cfpGroup(cfp_ : cashFlowPeriod) :FormGroup{
    const g : FormGroup = this.fb.group({
      value1: cfp_.value1
    });
    //  g.patchValue(cfp_);   //suggested in one of the related SO questions. No Joy.
    return g;
  }


  //needed to patch the myDatePicker. It works, it may not be pretty or efficient... 
  threePartDateFromDate(d_: string): any {
    const date_ = new Date(d_);

    return {
      date: {
        year: date_.getFullYear(),
        month: date_.getMonth()+1,
        day: date_.getDate()}
    }

  }
}

и вот мой шаблон

    <div *ngIf="myCashFlow && myFormGroup" [formGroup]="myFormGroup">

      <table style="margin:7px 7px 7px 7px">
            <tr>
          <td class="fieldLabel">Cash Flow Name</td>
          <td>
            <input type="text"
                   formControlName="cashFlowName"
                   style="width:175px;" />
          </td>
        </tr>


      </table>




   <table border="1">
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods,let i=index">{{cfp.periodName}}</td>
    </tr>
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods, let i=index" style="padding:7px;">
        <input type="text"
               [id]="cfp.periodName"
               style="width:35px;" />
      </td>
    </tr>
  </table>

</div>

Answer 1

спасибо, saksham, за то, что предложили положить это в stackblitz
выучить новый навык каждый день, кажется

пожалуйста, найдите это здесь.https://stackblitz.com/edit/angular-qcjxri

Мне удалось выявить проблему путем тщательного сравнения кода стекаблица в этом примере с помощью vic rubba https://dev.to/crazedvic/using-patchvalue-on-formarrays-in-angular-7-2c8c

1. My, которая содержит необходимый ngFORformArrayName="periods" без скобок
2. Мне нужен [formGroupName]="periodIndex", который является индексом для.Если кто-то может это объяснить, я ценю это.Это был волшебный последний кусок.
3. необходимые formControlName="value1" без скобок

За последние два дня я прочитал МНОГИЕ статьи о FormGroup и FormArray и patchValue.Каким-то образом очки 2 и 3 ускользнули от моего внимания.Мне интересно вернуться и прочитать эти статьи еще раз.

Надеюсь, это кому-нибудь поможет.

HTML-шаблон целиком находится на stackBlitz, но я выкладываю его здесь, чтобы вы могли видеть, где мои 3 точки находятся в контексте.

  <table border="1">
    <tr>
      <td *ngFor="let cfp of myCashFlow.periods,let i=index">{{cfp.periodName}}</td>
    </tr>
    <tr  formArrayName="periods">
      <td *ngFor="let item of myFormGroup.get('periods').controls, let periodIndex=index"
          style="padding:7px;"
          [formGroupName]="periodIndex">
        <input type="text"
               formControlName="value1"
               style="width:35px;" />
      </td>
    </tr>
  </table>