![中的对象数组绑定]( "中的对象数组绑定")
本文介绍了如何将编辑表单的值与 angular 5 中的对象数组绑定?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一组 Student 对象.界面如下所示:
interface 学生{标题:字符串；名字:字符串；姓氏:字符串；dob:字符串；年龄:数量；}
我要编辑title、firstName &姓氏.
表单将包含学生对象数组.从数据库中获取的对象中已经有一些数据.title 是一个下拉列表，firstName 和 lastName 是文本框.
将会有一个保存按钮，点击该按钮后，表单的值应该被捆绑并通过Student[]发送到打字稿.
我怎样才能做到这一点?
解决方案
您可以为此使用反应式表单.
首先获取您的数据并相应地生成一个FormGroup.我在 ngOnInit 方法中使用 FormBuilder 来做到这一点.
无论您从 API 获得什么，都可以映射为 FormGroup(s) 的 FormArray.
现在在模板中，您只需在选择列表上使用 formControlName 指令，即可使用 title 属性的 API 数据自动填充它.
试试这个:
import { Component } from "@angular/core";import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";从@angular/common/http"导入 { HttpClient };接口学生{标题:字符串；名字:字符串；姓氏:字符串；dob:字符串；年龄:数量；}@成分({选择器:我的应用程序"，templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]})导出类 AppComponent {name = "角度";表格:表格组；构造函数(私有 http:HttpClient，私有 fb:FormBuilder){}ngOnInit() {this.http.get("/assets/data.json").subscribe((students: Array) => {this.form = this.fb.group({学生:this.fb.array(student.map(student =>这个.fb.group({标题: [student.title],名字:[student.firstName]，姓氏:[学生.姓氏]，dob: [student.dob],年龄:[student.age]})))});});}提交(){console.log("表单值:", this.form.value);}}
在模板中:
<div [formGroupName]="i"><label for="title">标题</label><select name="title" id="title" formControlName="title"><option value="" disabled>选择</option><option value="Mr.">Mr.</option><option value="Mrs.">Mrs.</option><option value="Ms.">Ms.</option></选择><br><label for="firstName">名字</label><input type="text" id="firstName" formControlName="firstName"><br><label for="lastName">姓氏</label><input type="text" id="lastName" formControlName="lastName"><br><label for="dob">DOB</label><input type="text" id="dob" formControlName="dob"><br><label for="age">年龄</label><input type="text" id="age" formControlName="age"><br><小时><br>
<button type="submit">提交</button></表单>
这是一个 工作代码示例供您参考.
I have an Array of Student Objects. The interface looks something like this:
interface Student {
title: string;
firstName: string;
lastName: string;
dob: string;
age: number;
}
I want to edit title, firstName & lastName.
The form will have array of student objects. There is already some data in objects fetched from db.title is a dropdown, firstName and lastName are textboxes.
There will be a save button, on click of which the values of the form should be bundled and sent through Student[] to typescript.
How can I achieve this?
解决方案
You could use a Reactive Form for this.
First get your data and generate a FormGroup accordingly. I'm doing that using FormBuilder in the ngOnInit method.
Whatever you get from the API can be mapped as a FormArray of FormGroup(s).
Now in the template, you would just have to use the formControlName directive on a select list to auto-populate it with the API data for the title property.
Give this a try:
import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";
import { HttpClient } from "@angular/common/http";
interface Student {
title: string;
firstName: string;
lastName: string;
dob: string;
age: number;
}
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
form: FormGroup;
constructor(private http: HttpClient, private fb: FormBuilder) {}
ngOnInit() {
this.http.get("/assets/data.json").subscribe((students: Array<Student>) => {
this.form = this.fb.group({
students: this.fb.array(
students.map(student =>
this.fb.group({
title: [student.title],
firstName: [student.firstName],
lastName: [student.lastName],
dob: [student.dob],
age: [student.age]
})
)
)
});
});
}
onSubmit() {
console.log("Form Value: ", this.form.value);
}
}
And in the template:
<form
*ngIf="form"
[formGroup]="form"
(submit)="onSubmit()">
<div
formArrayName="students"
*ngFor="let studentFormGroup of form.controls['students'].controls; let i = index;">
<div [formGroupName]="i">
<label for="title">Title</label>
<select name="title" id="title" formControlName="title">
<option value="" disabled>Select</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<br>
<label for="firstName">First Name</label>
<input type="text" id="firstName" formControlName="firstName">
<br>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" formControlName="lastName">
<br>
<label for="dob">DOB</label>
<input type="text" id="dob" formControlName="dob">
<br>
<label for="age">Age</label>
<input type="text" id="age" formControlName="age">
<br>
<hr>
<br>
</div>
</div>
<button type="submit">Submit</button>
</form>
这篇关于如何将编辑表单的值与 angular 5 中的对象数组绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！