基于用户输入动态生成文本框并存储值的Angular简化方案诉求

嘿，我来帮你搞定这个Angular动态输入框存值的问题！你的核心需求是根据用户输入的数字渲染对应数量的输入框，同时能保存每个输入框的值对吧？原来的代码只实现了渲染，但没做数据绑定，所以输入值没法留存下来。下面给你一套简化且能正常存储值的实现方案：

组件类代码（TypeScript） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-inputs',
  templateUrl: './dynamic-inputs.component.html'
})
export class DynamicInputsComponent {
  inputCount: number = 0;
  userNames: string[] = [];
  extraTexts: string[] = [];

  onCountEntered(inputValue: string) {
    this.inputCount = parseInt(inputValue) || 0;
    // 初始化用户名输入框对应的数组
    this.userNames = Array(this.inputCount).fill('');
    // 初始化额外文本框对应的数组（数量为输入数-1）
    this.extraTexts = Array(Math.max(0, this.inputCount - 1)).fill('');
  }
}

模板代码（HTML） #

<div>
  Enter number of name fields: <input type="number" (input)="onCountEntered($event.target.value)">

  <div *ngFor="let _ of userNames; let i = index" class="input-row">
    name: <input type="text" [(ngModel)]="userNames[i]" placeholder="Enter username">
    <!-- 仅在非最后一个用户名框右侧显示额外文本框 -->
    <ng-container *ngIf="i < extraTexts.length">
      extra text: <input type="text" [(ngModel)]="extraTexts[i]" placeholder="Enter extra content">
    </ng-container>
  </div>
</div>

关键细节说明 #

• 用**双向绑定[(ngModel)]**把每个输入框和组件内的数组元素关联，输入的值会自动同步到数组中，后续要获取所有输入内容直接用userNames和extraTexts数组就行。
• 去掉了原来复杂的times迭代器函数，改用Array(x).fill('')直接创建指定长度的空数组，代码更简洁易读。
• 把输入框改成type="number"，避免用户输入非数字内容，处理时用parseInt确保得到合法数字。
• 用*ngFor的index判断额外文本框的显示时机，逻辑更清晰，不会出现多余的空框。

这样修改后，你既能动态渲染对应数量的输入框，每个输入框的内容也能实时存储下来，完全满足需求~

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