typescript 如何在角度 6 中动态添加输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54521848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add input fields dynamically in angular 6
提问by user1298426
I need to add input fields to array of objects and a map which grows dynamically based on user's choice.
我需要将输入字段添加到对象数组和根据用户选择动态增长的地图。
For e.g. InputFormhas a list and a map which needs to be filled by user.
例如，InputForm有一个列表和一个需要用户填写的地图。
export class InputForm {
mapA: {};
listA: ListA[] = [];
}
export class ListA {
input1 : String
input2 : number
}
I need to show it on UI in such a way that input1, input2 and key, value for map of criteria is visible as the input field. The user fills all 4 input fields and clicks on the add button.
我需要以这样的方式在 UI 上显示它，即 input1、input2 和 key、条件映射的值作为输入字段可见。用户填写所有 4 个输入字段并单击添加按钮。
Then again same input fields should be editable for the user for the second input. This way he can build list and map and when he clicks on submit button array and map should have all the values filled before.
然后，对于第二个输入，用户应该可以编辑相同的输入字段。这样他就可以构建列表和地图，当他点击提交按钮时，数组和地图应该之前填充了所有值。
*ngFordoesn't work because the initial list is empty.
*ngFor不起作用，因为初始列表为空。
回答by Faruq
Assuming you are using Angular Reactive Form, you can use a combination of *ngForand FormArray. You can start with an empty FormArrayand add dynamically using the .push()method. Here is a good and detailed example https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/
假设你使用的角度反应形式，你可以使用的组合*ngFor和FormArray。您可以从空开始FormArray并使用该.push()方法动态添加。这是一个很好的详细示例https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/
order-form.component.ts:
订单-form.component.ts：
@Component({
selector: '...',
templateUrl: './order-form.component.html'
})
export class OrderFormComponent implements OnInit{
orderForm: FormGroup;
items: FormArray;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.orderForm = this.formBuilder.group({
customerName: '',
email: '',
items: this.formBuilder.array([ this.createItem() ])
});
}
createItem(): FormGroup {
return this.formBuilder.group({
name: '',
description: '',
price: ''
});
}
addItem(): void {
this.items = this.orderForm.get('items') as FormArray;
this.items.push(this.createItem());
}
}
order-form.component.html:
订单-form.component.html：
...
<div formArrayName="items"
*ngFor="let item of orderForm.get('items').controls; let i = index;">
<div [formGroupName]="i">
<input formControlName="name" placeholder="Item name">
<input formControlName="description" placeholder="Item description">
<input formControlName="price" placeholder="Item price">
</div>
Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>
...
