如何使用按钮添加更多输入字段 - Angular 2 动态表单 [英] How to add more input fields using a button - Angular 2 dynamic forms
问题描述
所以我在这里使用了指南:https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
我需要向现有字段添加更多字段.我做了一些有用的东西,但它很笨重,当我点击它时它会重置表单.代码如下:
在动态form.component.ts中:
add_textbox(){this.questions.push(this.questionService.create_textbox({key: "test", label: "Test"}));控制台日志(这个.问题);this.form = this.qcs.toFormGroup(this.questions);}
在 question.service.ts
create_textbox({key, value, label = '', order = 1, type = "text", description = "", help = ""}: {key?: any, value?: any,label?: any, order?: any, type?: any, description?: any, help?: any}){返回新的文本框问题({钥匙,标签,价值,命令,描述,类型});}
我的按钮也在 dynamic-form.component.html
中,但我希望它在 dynamic-form-question.component.ts
中.这可能吗?
首先
import { FormGroup,FormArray,FormBuilder,Validators } from '@angular/forms';
然后
addForm: FormGroup;//表单组实例构造函数(私有 formBuilder:FormBuilder){}ngOnInit() {//*** 这是用于添加发票详细信息的代码 ***this.addForm = this.formBuilder.group({发票编号:['',Validators.required],file_no: ['', Validators.required],描述:['',Validators.required],链接到驱动器:this.formBuilder.array([this.initLink(),])});}初始化链接(){返回 this.formBuilder.group({链接地址:['',Validators.required]});}添加链接(){常量控制 = <表格阵列 >this.addForm.controls['linktodrive'];control.push(this.initLink());}removeLink(i: number) {常量控制 = <表格阵列 >this.addForm.controls['linktodrive'];control.removeAt(i);}
开始和结束您的 HTML:
<div formArrayName="linktodrive"></div>
要在表单中创建和删除动态字段,请使用此 html:
<div><span>链接{{i + 1}}</span><span *ngIf="addForm.controls.linktodrive.controls.length > 1"><a (click)="removeLink(i)">REMOVE</a></span><!-- Angular 默认将数组索引指定为组名 0, 1, 2, ... --><div [formGroupName]="i"><input type="text" placeholder="输入链接" formControlName="linkAddress">
最后是添加"链接
<div><a (click)="addLink()"></a></div>
So I used the guide here: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
I need to add more fields to an existing field. I've made something that works, but it's clunky and it resets the form when I hit it. Code below:
In dynamic-form.component.ts:
add_textbox()
{
this.questions.push(this.questionService.create_textbox({key: "test", label: "Test"}));
console.log(this.questions);
this.form = this.qcs.toFormGroup(this.questions);
}
In question.service.ts
create_textbox({key, value, label = '', order = 1, type = "text", description = "", help = ""}: {key?: any, value?: any, label?: any, order?: any, type?: any, description?: any, help?: any})
{
return new TextboxQuestion({
key,
label,
value,
order,
description,
type
});
}
My button is also in dynamic-form.component.html
but I'd like it to be in dynamic-form-question.component.ts
instead. Is this possible?
first of all
import { FormGroup,FormArray,FormBuilder,Validators } from '@angular/forms';
then
addForm: FormGroup; // form group instance
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
// *** this is code for adding invoice details ***
this.addForm = this.formBuilder.group({
invoice_no: ['', Validators.required],
file_no: ['', Validators.required],
description: ['', Validators.required],
linktodrive: this.formBuilder.array([
this.initLink(),
])
});
}
initLink() {
return this.formBuilder.group({
linkAddress: ['', Validators.required]
});
}
addLink() {
const control = < FormArray > this.addForm.controls['linktodrive'];
control.push(this.initLink());
}
removeLink(i: number) {
const control = < FormArray > this.addForm.controls['linktodrive'];
control.removeAt(i);
}
Begin and close your HTML with:
<div formArrayName="linktodrive"></div>
For creating and removing dynamic fields to your form use this html:
<div *ngFor="let address of addForm.controls.linktodrive.controls; let i=index">
<div>
<span>Link {{i + 1}}</span>
<span *ngIf="addForm.controls.linktodrive.controls.length > 1"><a (click)="removeLink(i)">REMOVE</a></span>
</div>
<!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
<div [formGroupName]="i">
<input type="text" placeholder="Enter Link" formControlName="linkAddress">
</div>
</div>
And finally the "ADD" link
<div><a (click)="addLink()"></a></div>
这篇关于如何使用按钮添加更多输入字段 - Angular 2 动态表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!