我有一个绑定到html表单和mat-expansion-panel视图的对象的json数组。我正在尝试获取name输入字段的更改的值，但是无论如何它都会返回初始值。例如如果我将name1更改为name111并按Submit按钮，我会在警报窗口中看到name1。如果使用this.myForm.controls["name"].value，它将返回上次更改的值，但这是不正确的，因为我可以按另一项的保存按钮。
如何在提交事件中获取当前项目输入字段的所有值？（包括更改的值）
https://stackblitz.com/edit/angular-3xjnjv?file=src%2Fapp%2Fapp.component.ts
示例：
1）我明白了
id1 |名称=名称1 |保存button1
id2 |名称=名称2 |保存button2
id3 |名称=名称3 |保存按钮3
2）我改变
id1 |名称=更改名称1 |保存button1
id2 |名称=更改名称2 |保存button2
id3 |名称=更改名称3 |保存按钮3
3）我按下“保存”按钮2
4）我看到item: changedname2
onSubmit() {
window.alert("item: " + this.selItem.name); // item: changedname2
}
app.component.html
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<mat-expansion-panel [expanded]="isFirst" *ngFor="let item of items; let isFirst = first; let i = index;">
<mat-expansion-panel-header>
<mat-panel-title>
<h3>{{item.id}}</h3>
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<div class="row">
<div>
<input matInput formControlName="id" value="{{item.id}}" placeholder="{{id}}" type="text">
</div>
</div>
<div class="row">
<div>
<input matInput formControlName="name" value="{{item.name}}" placeholder="{{name}}">
</div>
</div>
<button (click)="setItem(item)" mat-raised-button >{{updateItem}}</button>
</mat-expansion-panel>
</form>
app.component.ts
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';
import { MatSort, Sort } from '@angular/material';
import { MatPaginator, PageEvent } from '@angular/material';
import { fromMatSort, sortRows } from './datasource-utils';
import { fromMatPaginator, paginateRows } from './datasource-utils';
import { FormBuilder, FormGroup, FormArray , Validators } from '@angular/forms';
export interface PeriodicElement {
id: string;
name: string;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
updateItem = 'Save';
myForm: FormGroup;
items: any;
selItem: any;
constructor(private formBuilder: FormBuilder) { }
onSubmit() {
window.alert("item: " + this.selItem.name);
window.alert(this.myForm.controls["name"].value);
// ...
}
ngOnInit() {
this.myForm = this.formBuilder.group({
id: [''],
name: ['']
});
const ELEMENT_DATA: PeriodicElement[] = [{"id":"id1",
"name":"name1"},
{"id":"id2",
"name":"name2"},
{"id":"id3",
"name":"name3"}
//,...
];
this.items = ELEMENT_DATA;
}
setItem(item) {
this.selItem = item;
}
}
答案 0 :(得分：0)
解决方案是
Dynamic form using *ngFor and submitting values from it
https://stackblitz.com/edit/angular-t5kbob?file=src%2Fapp%2Fapp.component.ts
app.component.html
<form id="myForm" [formGroup]="thisIsMyForm">
<div [formArrayName]="'formArrayName'">
<mat-card *ngFor="let x of data; let i = index">
<div [formGroupName]="i">
<mat-form-field>
<label>id:</label>
<input formControlName="id" id="{{x.id}}" matInput value="{{x.id}}">
</mat-form-field>
<mat-form-field>
<label>name:</label>
<input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}"/>
</mat-form-field>
<button *ngIf="fomrControlState(i)" (click)="toggleEdit(i)">Enable Edit</button>
<button *ngIf="!fomrControlState(i)" (click)="toggleEdit(i)">Save</button>
</div>
</mat-card>
<button [disabled]="thisIsMyForm.get('formArrayName').enabled" (click)="onSubmit()">Submit Form</button>
</div>
</form>
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
thisIsMyForm: FormGroup;
data = [
{ id: "one", name: "one" },
{ id: "two", name: "two" },
{ id: "three", name: "three" }
];
constructor(private formBuilder: FormBuilder) {
this.thisIsMyForm = new FormGroup({
formArrayName: this.formBuilder.array([])
})
this.buildForm();
}
buildForm() {
const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
Object.keys(this.data).forEach((i) => {
controlArray.push(
this.formBuilder.group({
id: new FormControl({ value: this.data[i].id, disabled: false }),
name: new FormControl({ value: this.data[i].name, disabled: false })
})
)
})
console.log(controlArray.controls)
}
toggleEdit(i) {
const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
console.log(controlArray.controls[i].value)
}
fomrControlState(i){
const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;
return controlArray.controls[i].enabled
}
onSubmit() {
// Here I would like to be able to access the values of the 'forms'
console.log(this.thisIsMyForm.value)
}
}
答案 1 :(得分：0)
HTML file -
// 1 - add (ngModelChange)="updateName(i)" to the input
<input matInput formControlName="name" value="{{item.name}}" placeholder="
{{name}}" (ngModelChange)="updateName(i)">
// 2 - Pass index value through the setItem()
<button (click)="setItem(item, i)" mat-raised-button >{{updateItem}}
</button>
.ts File
// 1 - declare index in AppComponent Class
updateItem = 'Save';
myForm: FormGroup;
items: any;
selItem: any;
index: number; // <----------index
// 2 - Add "updateName(i)" and Update "setItem() && onSubmit()" functions
onSubmit() {
alert(this.items[this.index].name);
}
updateName(i) {
this.items[i].name = this.myForm.controls["name"].value;
}
setItem(item, i) { // <----------- (item, i)
this.selItem = item;
this.index = i;
}