如何根据下拉列表中的选定数字生成表单输入字段（选择）

Question

我想根据下拉列表中的选定值生成输入文本框。

<mat-label>Options</mat-label>
<mat-form-field>
 <select matNativeControl name="Options" required>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
 </select>
</mat-form-field>

就在这个选择框之后，一些输入字段应该按照选定的数字出现。

Answer 1

我建议您使用反应形式来做到这一点。看看这里的 stackblitz ，但它基本上可以归结为：

组件用户界面：

<select matNativeControl name="Options" required (change)="onChange($event.target.value)">
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div [formGroup]="textBoxFormGroup" *ngFor="let items of items; let i=index">
    <input [formControl]="textBoxFormGroup.controls[i]" type="text" />
</div>

组件逻辑：

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  items: any[] = [];
  textBoxFormGroup :FormArray

  constructor(public formBuilder:FormBuilder){
    this.textBoxFormGroup = this.formBuilder.array([]);
    this.addControl(0);
    this.addControl(1);
  }
  ngOnInit() {

  }

  onChange(i) {
    while(this.textBoxFormGroup.length > 0) {
      this.items.pop();
      this.textBoxFormGroup.removeAt(0);
    }
    while(i > 0) {
      this.addControl(i);
      i--;
    }
  }

  addControl(i) {
      this.items.push({id: i.toString()})
      this.textBoxFormGroup.push(this.formBuilder.control(''));
  }
}