【发布时间】：2019-02-22 12:51:02
【问题描述】：
我有一个 ngFor，它包含在一个响应式表单中。这是代码：
<div class="element-list">
<form [formGroup]="formGroup" class="single-item" *ngFor="let p of points; let i = index">
<span>Lat: </span> <input formControlName="lat" type="text" value="{{p.lat}}">
<span>Lon: </span> <input formControlName="lon" type="text" value="{{p.lon}}">
<a (click)="updateData(i)">Submit</a>
</form>
</div>
这是.ts的一面
export class MapInfoBarComponent implements OnInit, OnDestroy
{
points: MapDetailModel[] = [];
isAlive = true;
formGroup: FormGroup;
constructor(
private mapService: MapService,
private fb: FormBuilder
){}
ngOnInit() {
this.mapService.pointsChanged
.takeWhile(() => this.isAlive)
.subscribe( evt => {
if(!!evt){
this.points = evt;
}
});
this.formGroup = this.fb.group({
lat: new FormControl(),
lon: new FormControl()
});
}
ngOnDestroy(): void {
this.isAlive = false;
}
updateData(id: number){
console.log(id + " > " + this.formGroup.value);
}
}
每当我点击a 时，我从this.formGroup.value 得到的只是空值和空值。
问题
我的问题是，当我点击一个按钮时，如何“知道”我指的是哪个 formGroup？ this.points 有时会发生变化，从另一个组件推送新元素。
例如，我想更新第三个元素，并在console.log 中查看更新后的值。
感谢任何帮助。谢谢。
我是如何解决这个问题的
感谢 @ak.leimrey 将下面的链接传递给我。
我是这样解决的：
.ts 文件：
export class MapInfoBarComponent implements OnInit, OnDestroy
{
points: MapDetailModel[] = [];
isAlive = true;
survey: FormGroup;
items = false;
constructor(
private mapService: MapService,
private fb: FormBuilder
){}
ngOnInit() {
this.mapService.pointsChanged
.takeWhile(() => this.isAlive)
.subscribe( evt => {
if(!!evt){
this.points = evt;
if(!this.items){
this.survey = this.fb.group({
sections: this.fb.array([
this.initSection(0),
]),
});
this.items = true;
} else {
this.addSection(this.points.length - 1);
}
}
});
}
initSection(idx: number) {
return this.fb.group({
lat: [this.points[idx].lat],
lon: [this.points[idx].lon],
})
}
addSection(idx: number) {
const control = <FormArray>this.survey.get('sections');
control.push(this.initSection(idx));
}
getSections(form) {
//console.log(form.get('sections').controls);
return form.controls.sections.controls;
}
updateData(index: number){
const values = this.survey.value.sections[index] as MapDetailModel;
this.mapService.setChangePoint(values);
}
ngOnDestroy(): void {
this.isAlive = false;
}
}
html 文件：
<div class="main-wrapper">
<div class="map-info-bar">
<div class="blocco-info">
{{lang.phrase('Coord')}}: {{lang.phrase('Lat')}} {{currentLatitude}} {{lang.phrase('Lon')}} {{currentLongitude}}
</div>
<div class="blocco-info">
<dx-select-box [items]="zoomLevels" [value]="scale" (onValueChanged)="onScaleChange($event.value)">
</dx-select-box>
</div>
</div>
<div class="element-list">
<form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)" *ngIf="items">
<div formArrayName="sections">
<div class="single-item" *ngFor="let section of getSections(survey); let i = index">
<div [formGroupName]="i">
<input type="text" formControlName="lat" class="frm-txt">
<input type="text" formControlName="lon" class="frm-txt">
<a (click)="updateData(i)">Update data</a>
</div>
</div>
</div>
</form>
</div>
</div>
类：
export class MapDetailModel{
lat: number;
lon: number;
alt: number;
long?: number;
}
【问题讨论】：
-
我认为您需要查看 formarray 而不是 formgroup。
标签： angular typescript