如何根据角度 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，则孩子年龄的输入标签数 = 1。

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

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

如果 noOFChild =1，则孩子年龄的输入标签数 = 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));
}

这是儿童年龄控制的吸气剂

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 输入。