Angular Reactive Form with dynamic fields

Question

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.

what is id_campo and where is it set, please create a stackblitz to be able help you better — Reza
– Reza, Commented Jan 27, 2020 at 16:57
Think that a formGroup is only a group of FormControls. To access to a formControl of a formGroup you use nameOfForm.get('nameOfField'), so you can use otherDataForm.get(field.id_campo) to get the formControl, so otherDataForm.get(field.id_campo).valid give you if is valid, otherDataForm.get(field.id_campo).errors give you the errors... even you can use in your input <input class="form-control" [formControl]="otherDataForm.get(field.id_campo)" type="number"> — Eliseo
– Eliseo, Commented Jan 27, 2020 at 17:36
@Eliseo I've tried this but this doesn't work, it's seems like the ngfor works apart of the form. — jenesuispastom
– jenesuispastom, Commented Jan 27, 2020 at 18:09
@NicholasK Well, at least that appends the property "field.id_campo" as a name for each field. — jenesuispastom
– jenesuispastom, Commented Jan 27, 2020 at 18:10

Moin Memon · Accepted Answer · 2021-11-16 10:34:03Z

21

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

edited Nov 16, 2021 at 10:34

Moin Memon

741 silver badge11 bronze badges

answered Jan 27, 2020 at 20:05

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jenesuispastom Over a year ago

Thank you so much, Eliseo. You've enlightened me with my mistake at the time of getting the error from each field.

Collectives™ on Stack Overflow

Angular Reactive Form with dynamic fields

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related