如何根据给定数量的项目在角9添加和删除输入标签?

Question

我有一个这样的数据表单数据库，'

{
noOfChildren : 2,
childAge:[4,5]
}

我正在尝试编码编辑页面这些东西。

<div class="form-group">
<label for="flightChild" class="label">No of Children in Flight (2YRS - 17YRS)
</label>
<input type="number" min="0" max="9" nbInput fullWidth id="flightChild" placeholder="No of Children in Flight"
formControlName="flightChild" 
(keyup)="onNoOfChild($event)"/>
</div>

<div *ngIf="noOfChild > 0"  class="row" >
<div id="flightChildAge" class="col-md-4">
<div class="form-group">
<label for="flightChildAge" class="label">Children's age
</label>
<input type="number" min="3" max="17"  nbInput fullWidth id="flightChildAge" placeholder="Children's age"
formControlName="flightChildAge" />
</div>
</div>
</div>

**我已经试过这个代码。但是我需要修改

如果noOFChild =1，则孩子的年龄的输入标签的no =1。

如果noOFChild =2，则没有孩子的年龄=2的输入标签。

如果noOFChild =1，则没有孩子的年龄= 3的输入标签。

如果noOFChild =1，则儿童年龄的输入标签的no = 4。等等…**

如何在angular中做到这一点?

Answer 1

请查看https://angular.io/guide/reactive-forms#creating-dynamic-forms

简要:

youeForm = this.fb.group({
noOfChildren : [1, Validators.required],
flightChildAge: this.fb.array([])
});
for (let index = 0; index < this.model.noOfChildren; index++) {
this.flightChildAges.push(this.fb.control(0));
}

这是儿童年龄控件的getter

get flightChildAges() {
return this.youeForm.get('flightChildAge') as FormArray;
}

你的模板:

<div *ngFor="let child of flightChildAges.controls; let i=index">
<label for="child-{{ i }}">Children's age:</label>
<input id="child-{{ i }}" type="text" [formControlName]="i">
</div>

将索引赋给i变量并将其传递给每个控件以将其绑定到formControlName输入。