我有一张现金流量表。每个CashFlow都有可变数量的期间。 当我单击现金流量时,我正在尝试填充组件,以便可以编辑期间值。现金流量名称和开始/结束日期正在填充。 我有一系列的句点,每个文本都有显示的文本框。
我无法在文本框中显示初始值。
我正在尝试使patchValue或setValue正常工作。
我仔细审查了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>
答案 0 :(得分:0)
谢谢萨克斯姆(Saksham)建议我把它放在stackblitz中
似乎每天都在学习新技能
请在这里找到。 https://stackblitz.com/edit/angular-qcjxri
通过使用vic rubba的本示例仔细比较了stackblitz代码,我能够确定问题所在 https://dev.to/crazedvic/using-patchvalue-on-formarrays-in-angular-7-2c8c
formArrayName="periods"
没有括号[formGroupName]="periodIndex"
,它是for的索引。如果有人可以解释,id会很感激。那是魔术的最后一块。 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>