具有动态字段的 Angular Reactive Form
[英] Angular Reactive Form with dynamic fields
本文介绍了具有动态字段的 Angular Reactive Form的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前正在与 Angular 表单数组作斗争.
我有一个表单,可以在其中动态添加字段.
我已经创建了表单对象:
this.otherDataForm = this.fb.group({});
我像这样添加动态字段:
addField(field: CustomFormField): void {this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));}
我遍历这些字段:
</表单>
但我似乎无法控制每个字段的错误以在需要该字段时显示验证消息.
谁能帮我解决这个问题?也许有更好的方法来做到这一点.
解决方案
嗯,我觉得直接使用 formControl
和 formGroup
的构造函数更舒服
fields=[{id:'one',label'one',value:1},{id:'two',label'two',value:2}]表单=新表单组({})ngOnInit(){this.fields.forEach(x=>{this.form.addControl(x.id,new FormControl(x.value,Validators.Required))})}<表单[表单组]=表单"><div *ngFor="let field of fields"><input [formControlName]=field.id"><div class="error";*ngIf="form.get(field.id).touched &&form.get(field.id).invalid">必需</div>
</表单>{{form?.value|json}}
但是你可以直接在输入中使用[formControl]
</表单>
甚至,你可以迭代form.controls|keyvalue
</表单>
参见 stackblitz
I'm currently battling with Angular form array.
I have a form in which I add the fields dynamically.
I have created the form object:
this.otherDataForm = this.fb.group({
});
I add the dynamic fields like this:
addField(field: CustomFormField): void {
this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));
}
I loop through those fields:
<form *ngIf="selectedProfile" [formGroup]="otherDataForm">
<div class="mb-3" *ngFor="let field of fields; let i = index">
<label>{{field.descripcion}}</label>
<input class="form-control" [formControlName]="field.id_campo" type="number">
</div>
</form>
But I can't seem to get control of the errors of each field to show a validation message if the field is required.
Anyone can help me with this one?
Maybe there is a better way to do this.
解决方案
well, I feel more comfortable using directly the constructor of formControl
and formGroup
fields=[{id:'one',label'one',value:1},{id:'two',label'two',value:2}]
form=new FormGroup({})
ngOnInit()
{
this.fields.forEach(x=>{
this.form.addControl(x.id,new FormControl(x.value,Validators.Required))
})
}
<form [formGroup]="form">
<div *ngFor="let field of fields">
<input [formControlName]="field.id">
<div class="error" *ngIf="form.get(field.id).touched &&
form.get(field.id).invalid">Required</div>
</div>
</form>
{{form?.value|json}}
But you can use directily [formControl] in the input
<form [formGroup]="form">
<div *ngFor="let field of fields">
<label>{{field.label}}</label>
<input [formControl]="form.get(field.id)">
<div class="error" *ngIf="form.get(field.id).touched &&
form.get(field.id).invalid">Required</div>
</div>
</form>
Even, you can iterate over form.controls|keyvalue
<form [formGroup]="form">
<div *ngFor="let control of form.controls |keyvalue;let i=index">
<label>{{fields[i].label}}</label>
<input [formControl]="control.value">
<div class="error" *ngIf="control.value.touched &&
control.value.invalid">Required</div>
</div>
</form>
see stackblitz
这篇关于具有动态字段的 Angular Reactive Form的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!