Angular 9中如何根据儿童数量动态增减对应年龄input输入标签

核心使用Angular响应式表单的FormArray能力动态管理输入控件，分两步修改即可：

1. 组件类代码修改 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit {
  flightForm: FormGroup;
  // 数据库返回的原始数据
  dbData = {
    noOfChildren : 2,
    childAge:[4,5]
  };

  // 便捷获取FormArray实例的getter
  get childAgeArr(): FormArray {
    return this.flightForm.get('flightChildAge') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化基础表单
    this.flightForm = this.fb.group({
      flightChild: [0, [Validators.min(0), Validators.max(9)]],
      flightChildAge: this.fb.array([])
    });

    // 编辑页回填初始数据
    this.flightForm.patchValue({
      flightChild: this.dbData.noOfChildren
    });
    this.adjustChildAgeInputs(this.dbData.noOfChildren);
    // 回填已有年龄数据
    this.dbData.childAge.forEach((age, index) => {
      this.childAgeArr.at(index).setValue(age);
    });
  }

  onNoOfChild(event: any): void {
    const count = +event.target.value || 0;
    this.adjustChildAgeInputs(count);
  }

  // 动态调整年龄输入框数量的核心方法
  private adjustChildAgeInputs(count: number): void {
    const currentLength = this.childAgeArr.length;
    // 数量增加时新增表单控件
    if (count > currentLength) {
      for (let i = currentLength; i < count; i++) {
        this.childAgeArr.push(new FormControl(null, [Validators.min(3), Validators.max(17)]));
      }
    } 
    // 数量减少时移除多余表单控件
    else {
      for (let i = currentLength - 1; i >= count; i--) {
        this.childAgeArr.removeAt(i);
      }
    }
  }
}

2. 模板代码修改 #

<form [formGroup]="flightForm">
  <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" 
      (input)="onNoOfChild($event)"/>
  </div>

  <div *ngIf="childAgeArr.length > 0"  class="row" >
    <div class="col-md-4" *ngFor="let ageControl of childAgeArr.controls; let i = index">
      <div class="form-group">
        <label for="flightChildAge{{i}}" class="label">第{{i+1}}位儿童年龄
        </label>
        <input type="number" min="3" max="17"  nbInput fullWidth id="flightChildAge{{i}}" placeholder="请输入儿童年龄"
          [formControlName]="i" />
      </div>
    </div>
  </div>
</form>

补充说明 #

• 把原代码的keyup事件替换为input事件，兼容鼠标点击数字输入框增减按钮的场景
• 每个年龄输入框的id和label都携带索引，避免id重复的语义化问题
• 年龄控件自带3-17岁的校验规则，符合业务限制
• 提交表单时flightChildAge字段直接返回年龄数组，和数据库结构完全匹配，无需额外转换

内容的提问来源于stack exchange，提问作者hanu