Check all control forms

Question

I create a formGroup like this

this.availableSigners = new FormGroup({
        nameSigner: new FormControl(),
        mailSigner: new FormControl()
});

and in my html component I have this

<div *ngFor="let signer of signers;  let i = index">
                    <div class="form-row">
<div class="card-body col-md-4" style="padding-top: 0.75rem !important">
    <b>{{signer.name}}  {{signer.surname}} 
    </b>&nbsp;
 </div>
 </div> 
 <div class="form-row" >      
     <div class="col-md-4">
           <ng-select #mailDocumentSelect 
                  formControlName="mailSigner" [items]="mails"
                  bindValue="code" bindLabel="description"  
                  (click)="getMails()">
            </ng-select>
  </div>
   <div class="col-md-4">
                                <ng-select>
                                </ng-select>
  </div>
                    </div>
                    <br>   
                </div>

where signers is a list that is populate by a click and create a list of select mail.

My problem is that I'm trying to control that EVERY mailSigner's formcontrolname has value.

I create this function that is called by a click from another button

 getCompiledFeq(){

  if(this.availableSigners.get('mailSigner').value){
     return true;
  }
  return false;
 }

But this control return true when there is just one selected value(and doesn't control every form control).

How can I control that every select form is valued?

Answer 1

You cannot have multiple form controls with the same name.

You can differ them with an index.

In your ts file, you need to loop throw all your signers and add a control for each signer with an unique id, like this

   this.availableSigners = new FormGroup({
            nameSigner: new FormControl(),
            mailSigners: new FormArray()
    });

    for (let i = 0; i < signers.length; i++) {
             this.availableSigners.get('mailSigners').push('mailSigner-' + i , new FormControl('', Validators.required));
     } 

And in your html file change formControlName to "mailSigner-{{i}}" in order to have an unique index

<div *ngFor="let signer of signers;  let i = index">
                    <div class="form-row">
<div class="card-body col-md-4" style="padding-top: 0.75rem !important">
    <b>{{signer.name}}  {{signer.surname}} 
    </b>&nbsp;
 </div>
 </div> 
 <div class="form-row" >      
     <div class="col-md-4">
           <ng-select #mailDocumentSelect 
                  formControlName="mailSigner-{{i}}" [items]="mails"
                  bindValue="code" bindLabel="description"  
                  (click)="getMails()">
            </ng-select>
  </div>
   <div class="col-md-4">
                                <ng-select>
                                </ng-select>
  </div>
                    </div>
                    <br>   
                </div>