如何解决如何处理Angular中不确定数量的输入FormControl?
我有一个角度应用程序,我想在其中输入未知数量的条目(例如名称)到列表中。
我想将名称列表编译成一个数组。我希望能够显示一个输入元素,以允许用户输入名称。
每次他们输入一个名称时,我都希望它被验证并添加到名称数组中,并且希望在其下方显示一个新的空白输入字段。
我假设我的FormControl
中需要一个FormGroup
数组。如果是这样,如何在HTML表单中通过表单控件名称引用每个元素?
解决方法
例如,如果您的FormGroup
名称为myForm
,则将其公开,则可以在html中使用它:
<span *ngFor="let element of controlsNames">
<input id="{{element}}"
type="text"
formControlName="myForm.get(element)"
class="form-control" />
</span>
,
首先,您需要表单模型具有一个formArray
,它将作为您的名称数组:
this.form = this.formBuilder.group({ names: this.formBuilder.array([]) })
假设form
是您的根表单组。
然后,您可以使用一个按钮向表单数组添加新的名称控件:
<button type="button" (click)="addNameControl()">Add Name</button>
您的点击功能将类似于:
addNameControl(): void { (this.form.get('names') as FormArray).push(this.formBuilder.control('') }
如果要验证,可以在Submit函数上进行操作,遍历控件并检查值,或者在声明控件时使用Validators
。
您的最终html如下:
<div [formGroup]="form">
<div formArrayName="names">
<div *ngFor="let name of names.controls">
<input type="text" [formControl]="i">
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。