在Angular 8中创建动态文本框，并在表单提交时将值绑定到组件

Question

当按下按钮时，我正在尝试添加一个动态文本框。已成功添加动态文本框，但在表单提交时无法获取所有值(动态添加的文本框的值(。它始终绑定上次更新的文本框值。以下是我的代码片段

contribute.component.ts

export class ContributeComponent implements OnInit {
categories = [];
contribute = {};
private options = [{ value: '' }];
private contributeForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.contributeForm = this.formBuilder.group({
question: new FormControl(),
category: new FormControl(),
options: new FormControl()
});
add() {
this.options.push({ value: this.contributeForm.controls.options.value });
}

在我的html文件contribute.component.html 中

<form [formGroup]="contributeForm" (ngSubmit)="onSubmit(contributeForm.value)">
<div class="form-group">
<label class="control-label col-sm-2" for="message">Options:</label>
<div class="col-sm-10 inputGroupContainer">
<div *ngFor="let option of options; let in=index" class="spacer">
<div class="input-group">
<span class="input-group-addon">Option {{in+1}}</span>
<input type="text" class="form-control" rows="4" placeholder="Type your option here"
formControlName="options" name="option" [value]="options[in].value"/>
</div>
</div>
</div>
<div class="row"></div>
<div class="col-sm-12 pull-right">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<button class="btn btn-warning" type="button" (click)="add()">Add option <span
class="glyphicon glyphicon-send"></span>
</button>
</div>
<div class="col-sm-4"></div>
</div>
</div>

Answer 1

我想您对这应该如何工作感到困惑。您的contributeForm只有一个options字段，因此您只能将一个值绑定到此。。。也许你想把它做成一个数组。

每次调用add()函数时，它都会得到options的当前值。options仅绑定到单个文本框，该文本框将是最后创建的文本框，即底部文本框。因此，每次添加新选项时，最新的选项文本框都将绑定到options。

看看这个StackBlitz，每次添加新选项时都会看看这个控制台。