Angular2 表单 ControlGroup 持有未定义数量的 Control [英] Angular2 form ControlGroup who hold an undefined number of Control
问题描述
如何使用 Angular2 管理包含未定义字段数的表单?
就我而言,我需要创建一个用户可以从中添加和删除一些文件块的位置.它就像一个地址簿,用户可以在其中添加一个或十个地址.每个地址都有一些字段,如街道、街道号码等.
我的样子:
let address = fb.group({街道:fb.control(null, Validators.required),streetNumber fb.control(null, Validators.required)});this.userForm = fb.group({名称:fb.control(null, Validators.required),firstName: fb.control(null, Validators.required),地址:fb.group({1:地址})});
我真的不知道如何在模板中管理它.
我尝试在模板中写一些类似的东西,但很明显,它不起作用......
编辑
为了更好的解释,我做了一个 Plunker http://plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=预览
我为你实现了,见 Plunker 或更好,Plunker -@waldo
import {Component} from 'angular2/core';进口 {FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,抽象控件来自'angular2/common';@成分({选择器:'我的应用',模板:`<form [ngFormModel]="userForm" *ngIf="userForm"><p><label><input id="date" type="text" ngControl="name" #name="ngForm"/>名称</label></p><p><label><input id="date" type="text" ngControl="firstName" #firstName="ngForm"/>名字</label></p><h3>添加地址</h3><ul ngControlGroup="地址"><li *ngFor="#ctrl of objToArray(userForm.find('addresses').controls); #i = index"ngControlGroup="{{ctrl}}">{{ctrl}}:<input ngControl="street" placeholder="Street"><input ngControl="streetNumber" placeholder="StreetNumber"><div (click)="addAddress()" style="cursor:pointer">添加另一个地址
</表单>`,指令:[FORM_DIRECIVES]})导出类 AppComponent {用户表单:控制组;构造函数(私人FB:FormBuilder){this.userForm = fb.group({名称:fb.control(null, Validators.required),firstName: fb.control(null, Validators.required),地址:fb.group({地址1:fb.group({街道:fb.control(null, Validators.required),streetNumber: fb.control(null, Validators.required)})})});console.log(this.userForm);}objToArray(o){返回 Object.keys(o);}添加地址(){让 addressField = this.fb.group({街道:this.fb.control(null, Validators.required),streetNumber: this.fb.control(null, Validators.required)});(<ControlGroup>this.userForm.find('addresses')).addControl('地址' + (Object.keys(( How to manage with Angular2 a form who hold an undefined number of field ? In my case, I need to create a from where user can add and delete some block of fileds. It's like an address book where user can add one or ten address. And each address had a some fields like street, street number and so on. My look like this : I really don't know how to manage this in the template. I've try to write some thing like that in the template, but obviously, it doesn't work... EDIT I've made a Plunker for a better explanation http://plnkr.co/edit/ffYe1479WnxYOQrbxwLF?p=preview I implemented it for you, see Plunker or better yet, Plunker -@waldo
这篇关于Angular2 表单 ControlGroup 持有未定义数量的 Control的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!let address = fb.group({
street: fb.control(null, Validators.required),
streetNumber fb.control(null, Validators.required)
});
this.userForm = fb.group({
name: fb.control(null, Validators.required),
firstName: fb.control(null, Validators.required),
address: fb.group({
1: address
})
});
<form [ngFormModel]="userForm">
<input type="text" ngControl="name" #name="ngForm"/>
<input type="text" ngControl="firstName" #firstName="ngForm"/>
<div *ngFor="#address of userForm.controls['address'].controls">
<input type="text" ngControl="street" #street="ngForm"/>
<input type="text" ngControl="streetNumber" #streetNumber="ngForm"/>
</div>
import {Component} from 'angular2/core';
import {
FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,
AbstractControl
} from 'angular2/common';
@Component({
selector: 'my-app',
template: `
<form [ngFormModel]="userForm" *ngIf="userForm">
<p><label><input id="date" type="text" ngControl="name" #name="ngForm"/> Name</label></p>
<p><label><input id="date" type="text" ngControl="firstName" #firstName="ngForm"/> FirstName</label></p>
<h3>Add address</h3>
<ul ngControlGroup="addresses">
<li *ngFor="#ctrl of objToArray(userForm.find('addresses').controls); #i = index"
ngControlGroup="{{ctrl}}">
{{ctrl}}:
<input ngControl="street" placeholder="Street">
<input ngControl="streetNumber" placeholder="StreetNumber">
</li>
</ul>
<div (click)="addAddress()" style="cursor: pointer"> Add Another Address</div>
</form>
`,
directives: [FORM_DIRECTIVES]
})
export class AppComponent {
userForm: ControlGroup;
constructor(private fb: FormBuilder) {
this.userForm = fb.group({
name: fb.control(null, Validators.required),
firstName: fb.control(null, Validators.required),
addresses: fb.group({
address1: fb.group({
street: fb.control(null, Validators.required),
streetNumber: fb.control(null, Validators.required)
})
})
});
console.log(this.userForm);
}
objToArray(o){
return Object.keys(o);
}
addAddress() {
let addressField = this.fb.group({
street: this.fb.control(null, Validators.required),
streetNumber: this.fb.control(null, Validators.required)
});
(<ControlGroup>this.userForm.find('addresses')).addControl(
'address' + (Object.keys((<ControlGroup>this.userForm.find('addresses')).controls).length + 1), addressField);
}
}