根据其他输入字段值动态生成输入字段

Question

我正在尝试开发一项功能，其中生成的输入字段的数量由我在其他输入字段中输入的数字决定。 例如：如果我在“数量”表单字段中输入 4，则 serialNumbers 的 4 个输入字段应在下面生成为列表。

我的 HTML 代码：

<mat-form-field>
  <input matInput type="number" formControlName="quantity" placeholder="Enter Quantity" (change)="somethingChanged()" />
</mat-form-field>
<div>
  <ul>
    <li *ngFor="let item of quantity">
      <mat-form-field>
        <input matInput type="number" formControlName="serialNumber" placeholder="Enter Serial Number" />
      </mat-form-field>
    </li>
  </ul>
</div> 

我的组件代码：

somethingChanged() {
    let quantity = 0;
    quantity = parseInt(this.form.get('quantity').toString());
    let i = 0;
    while(quantity > 0) {
        this.serialNumber.push();
        i++;
    }
}

由于我是 Angular 的初学者，我不知道如何在不使用插值的情况下捕获 onChange 事件。请建议我一个解决方案。谢谢。

Answer 1

试试这个简单的例子

quantity: any;
       somethingChanged() {
        console.log(this.quantity)
      }

      counter(i: number) {
        return new Array(i);
    }

html

 <input  type="number" [(ngModel)]="quantity" placeholder="Enter Quantity" (change)="somethingChanged()"/> 
 <div>
      <ul>
          <li *ngFor="let item of counter(quantity)">
                  <input  type="number" placeholder="Enter Serial Number"/> 
          </li>       
      </ul>
  </div>

Answer 2

虽然您的问题不清楚，但我认为您需要从表单中获取动态数量的“serialNumbers”。这是html：

<input type="text" class="form-control" (input)="onNumberChange($event.target.value)">
  <ul *ngIf="items">
   <li *ngFor="let item of items; let i=index">
    {{i}}) <input type="number" [(ngModel)]="serialNumber[i]" class="form-control">
   </li>
  </ul>

并且 .ts 文件应包含：

onNumberChange(numberValue) {  
 this.number = numberValue;
 this.createRange(this.number)
}
    createRange(number){
      for(var i = 1; i <= number; i++){
         this.items.push(i);
      }
}