Angular如何根据另一数字输入框的值动态生成多组表单字段

你已经完成了基础的表单结构搭建，只需要补充数字输入框绑定的inputTotal方法即可实现自动增减字段组的效果，具体实现如下：

TS 代码补充 #

在你的组件类中添加以下inputTotal方法：

inputTotal(value: string): void {
  // 将输入值转为正整数，非法值默认取1
  const targetCount = parseInt(value, 10) || 1;
  // 最低保留1组字段，允许为空可修改此处最小值
  const finalCount = Math.max(targetCount, 1);
  const currentCount = this.passenger.length;

  if (finalCount > currentCount) {
    // 目标数量大于当前数量，补充对应差值的字段组
    const addCount = finalCount - currentCount;
    for (let i = 0; i < addCount; i++) {
      this.addPassenger();
    }
  } else if (finalCount < currentCount) {
    // 目标数量小于当前数量，从末尾删除对应差值的字段组
    const removeCount = currentCount - finalCount;
    for (let i = 0; i < removeCount; i++) {
      this.passenger.removeAt(this.passenger.length - 1);
    }
  }
}

可选优化点 #

• 如果你希望输入完成、输入框失焦后才触发字段组更新，可以将输入框的(input)事件修改为(change)
• 可以给输入框添加type="number"属性，进一步限制只能输入整数
• 如果需要保留用户已填写的字段内容，可以在删除前判断待删除的表单组是否有值，添加确认提示避免误删

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