如何根据下拉列表中的选定数字生成表单输入字段(选择)
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】:您可以使用FormGroup
和FormArray
动态生成控件:
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(''));
【讨论】:
以上是关于如何根据下拉列表中的选定数字生成表单输入字段(选择)的主要内容,如果未能解决你的问题,请参考以下文章