patchValue 现在正在初始化 FormArray 值

Question

我有一个现金流表。每个现金流都有可变的周期数。 当我单击现金流时，我正在尝试填充一个组件，以便可以编辑期间值。 正在填充现金流名称和开始/结束日期。 我有一个周期数组，我为每个周期显示文本框。

我无法在文本框中显示初始值。
我正在尝试让补丁值或设置值工作。

我仔细审查了SO提出的12个相关问题。一个给了我一个尝试的想法，但它最终没有解决我的问题。

这是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

谢谢萨克沙姆建议我把它放在堆栈闪电战
中，似乎每天都学习一项新技能

请在这里找到它。 https://stackblitz.com/edit/angular-qcjxri

我能够通过仔细比较堆栈闪电战代码与 vic rubba 的这个例子来识别问题 https://dev.to/crazedvic/using-patchvalue-on-formarrays-in-angular-7-2c8c

1. 我的封装 ngFOR 需要一个没有括号formArrayName="periods"
2. 我需要[formGroupName]="periodIndex"，这是for的索引。 如果有人能解释这一点，我很感激。那是神奇的最后一件作品。
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>