How can I validate an array of fields in a reactive form?

Question

I have seen examples and I have not been able to find a way to validate my form. I basically have a form that consists of an array of fields that I want to validate because they are required.

this.formNames = this.fb.group({
  element_name: new FormControl('', [Validators.required]) //input text 
});

this.myForm = this.fb.group({
  names: this.fb.array([
      this.formNames,  
      this.formNames
  ])
})

I have the problem that I am trying to validate the text fields that are represented by: names and are required. but what happens in the image happens if I add text in any text field, they are all validated, I want that when I write something in the corresponding text field, validation is done exclusively for that field.

this is my live code:

https://stackblitz.com/edit/angular-xkhkoc?file=app/app.component.ts

<form [formGroup]="myForm">
  <div formArrayName="names">
  <ng-container
      *ngFor="let item of myForm.get('names').controls; let i=index">
      <div [formGroupName]="i">
              <input type="text" class="form-control" id="element_name"
                  formControlName="element_name"
                  placeholder="insert name" 
              >
              {{item.controls['element_name'].valid | json}}
      </div>
   </ng-container>
  </div>
 </form>

Manuel Panizzo · Accepted Answer · 2019-09-14 00:53:51Z

1

You are using the same object to all inputs. Try this.

this.myForm = this.fb.group({
  names: this.fb.array([
    this.fb.group({ element_name: [null, [Validators.required]] }),
    this.fb.group({ element_name: [null, [Validators.required]] }),
  ])
})

edited Sep 14, 2019 at 0:53

answered Sep 13, 2019 at 23:01

Manuel Panizzo

8964 silver badges8 bronze badges

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

2 Comments

yavg Over a year ago

Currently this solution not works with my code, can you help me please?

yavg Over a year ago

can you help me with this please: stackoverflow.com/questions/57932590/…

Collectives™ on Stack Overflow

How can I validate an array of fields in a reactive form?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related