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

Question

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

我的 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不使用插值的情况下捕捉事件。请建议我一个解决方案。谢谢。

标签： angulartypescriptangular-reactive-forms

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>