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

Posted

技术标签:

【中文标题】如何根据下拉列表中的选定数字生成表单输入字段(选择)【英文标题】:How to generate form Input field as per selected number from dropdown (select) 【发布时间】:2020-02-29 17:14:44 【问题描述】:

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

<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>

就在这个选择框之后,一些输入字段应该根据所选的数字出现。

【问题讨论】:

【参考方案1】:

以下解决方案可以为您工作。

html代码,

      <div>
        <mat-form-field>
          <mat-label> Options</mat-label>
          <mat-select
            [(ngModel)]="selectedValue"
            (selectionChange)="onSelectOption()"
          >
            <mat-option value="2">2</mat-option>
            <mat-option value="3">3</mat-option>
            <mat-option value="4">4</mat-option>
            <mat-option value="5">5</mat-option>
          </mat-select>
        </mat-form-field>
        <div *ngFor="let field of fieldsArray">
          <input type="text" [value]="field" />
        </div>
      </div> 

Component.ts 代码,

    selectedValue: number = 2;
    fieldsArray: any[] = [];

    onSelectOption() 
        for(let i=1; i<=this.selectedValue; i++) 
            this.fieldsArray.push(i);
        
    

【讨论】:

【参考方案2】:

您可以使用FormGroupFormArray 动态生成控件:

HTML 代码:

<mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected" (selectionChange)="addControlsInFormArray()">
        <mat-option>None</mat-option>
        <mat-option value="1">1</mat-option>
        <mat-option value="2">2</mat-option>
        <mat-option value="3">3</mat-option>
    </mat-select>
</mat-form-field>

    <form [formGroup]="fg" (ngSubmit)="onSubmit()">
        <div formArrayName="inputs" *ngFor="let item of fg.get('inputs').controls; let i = index;">
            <div [formGroupName]="i">
                <mat-form-field class="example-full-width">
                    <input matInput formControlName="question" placeholder="Placeholder text" value="">
  </mat-form-field>
            </div>
        </div>
    </form>

<div style="padding-top:20px">
    <h2>Form Value:</h2>
    fg.value | json
</div>

TS 代码:

import  Component  from "@angular/core";
import  FormBuilder, Validators,FormGroup,FormControl,FormArray from "@angular/forms";

/** @title Simple form field */
@Component(
  selector: "form-field-overview-example",
  templateUrl: "form-field-overview-example.html",
  styleUrls: ["form-field-overview-example.css"]
)
export class FormFieldOverviewExample 

  fg: FormGroup;
  fa: FormArray;
  selected = 0;

  constructor(private fb: FormBuilder) 
    this.fg = this.fb.group(
      inputs: this.fb.array([])
    );
  

  addControlsInFormArray() 
    if (this.fa) 
      while (this.fa.length !== 0) 
        this.fa.removeAt(0);
      
    
    for (var i = 0; i < this.selected; i++) 
      this.fa = this.fg.get("inputs") as FormArray;
      this.fa.push(this.createItem());
    
  

  createItem(): FormGroup 
    return this.fb.group(
      question: new FormControl("")
    );
  

Live Demo

【讨论】:

【参考方案3】:

我建议您使用响应式表单来执行此操作。看看这个 stackblitz here,但它基本上归结为:

组件界面:

<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(''));
  

【讨论】:

以上是关于如何根据下拉列表中的选定数字生成表单输入字段(选择)的主要内容,如果未能解决你的问题,请参考以下文章

根据下拉列表中的选定值显示表单字段Angular TypeScript

ReactJS:如何从输入字段的下拉列表中显示选定的值?

如何根据实体框架中的下拉列表选择项填充表单字段以进行更新?

在下拉选择中,如何从数据库中填写完整的表单字段

根据状态中的变量数显示输入字段

如何在layui中使用表单