gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 00:10:03 29 4
gpt4 key购买 nike

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

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

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

最佳答案

我建议您使用响应式(Reactive)形式来执行此操作。看看这个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(''));
}
}

关于html - 如何根据下拉列表中的选定数字生成表单输入字段(选择),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58692564/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com