在Angular 2中,可以使用动态创建的表单字段来绑定到对象。下面是一种常见的方法:
FormGroup
或FormBuilder
来创建。例如:import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({});
}
}
ngFor
指令来遍历动态创建的表单字段,并将它们绑定到表单对象中的属性。例如:<form [formGroup]="myForm">
<div *ngFor="let field of fields">
<label>{{ field.label }}</label>
<input [formControlName]="field.name" [type]="field.type">
</div>
</form>
在上面的代码中,fields
是一个包含动态字段信息的数组,每个字段都有一个label
和name
属性,用于显示标签和绑定表单控件。formControlName
指令用于将表单字段绑定到表单对象中的属性。
addControl
方法动态添加表单字段。例如:addField(label: string, name: string, type: string) {
this.myForm.addControl(name, this.formBuilder.control(''));
this.fields.push({ label, name, type });
}
在上面的代码中,addField
方法用于添加一个新的表单字段,并将其绑定到表单对象中。
这样,当动态创建的表单字段发生变化时,它们会自动绑定到Angular 2中的对象。可以通过访问myForm.value
来获取表单对象的值。
关于Angular 2中表单的更多信息,可以参考腾讯云的相关产品文档:Angular 表单
领取专属 10元无门槛券
手把手带您无忧上云