包含列表的 Angular2 反应形式
Angular2 reactive form containing a list
我正在尝试为用户创建一个表单,允许一个到 phone 个号码与该用户相关联。这在当前的响应式表单实现中是否可行?例如,我希望下面的表格可以接受很多 phone 个数字。我的前端实现将显示 phone 数字字段,并且会有一个按钮允许添加额外的 phone 数字字段。
userForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
phoneNumber: new FormControl('', Validators.required)
});
我的 hack 解决方案是
userForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
phoneNumber: new FormControl('', Validators.required),
phoneNumber1: new FormControl(),
phoneNumber2: new FormControl(),
phoneNumber3: new FormControl(),
phoneNumber4: new FormControl()
});
我可以隐藏额外的 phone 字段,直到点击添加额外的 phone 号码按钮。
您要使用的是 FormArray
,您可以在其中动态添加新的表单控件:
constructor(private fb: FormBuilder) { }
// build form
this.userForm = this.fb.group({
numbers: this.fb.array([
new FormControl()
])
});
// push new form control when user clicks add button
addNumber() {
const control = <FormArray>this.userForm.controls['numbers'];
control.push(new FormControl())
}
然后是您的模板:
<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)">
<div formArrayName="numbers">
<!-- iterate the array of phone numbers -->
<div *ngFor="let number of userForm.controls.numbers.controls; let i = index" >
<label>PhoneNumber {{i+1}} </label>
<input formControlName="{{i}}" />
</div>
</div>
<button type="submit">Submit</button>
</form>
Demo
我正在尝试为用户创建一个表单,允许一个到 phone 个号码与该用户相关联。这在当前的响应式表单实现中是否可行?例如,我希望下面的表格可以接受很多 phone 个数字。我的前端实现将显示 phone 数字字段,并且会有一个按钮允许添加额外的 phone 数字字段。
userForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
phoneNumber: new FormControl('', Validators.required)
});
我的 hack 解决方案是
userForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
phoneNumber: new FormControl('', Validators.required),
phoneNumber1: new FormControl(),
phoneNumber2: new FormControl(),
phoneNumber3: new FormControl(),
phoneNumber4: new FormControl()
});
我可以隐藏额外的 phone 字段,直到点击添加额外的 phone 号码按钮。
您要使用的是 FormArray
,您可以在其中动态添加新的表单控件:
constructor(private fb: FormBuilder) { }
// build form
this.userForm = this.fb.group({
numbers: this.fb.array([
new FormControl()
])
});
// push new form control when user clicks add button
addNumber() {
const control = <FormArray>this.userForm.controls['numbers'];
control.push(new FormControl())
}
然后是您的模板:
<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)">
<div formArrayName="numbers">
<!-- iterate the array of phone numbers -->
<div *ngFor="let number of userForm.controls.numbers.controls; let i = index" >
<label>PhoneNumber {{i+1}} </label>
<input formControlName="{{i}}" />
</div>
</div>
<button type="submit">Submit</button>
</form>