Check all control forms

user_11488464 0
Viewed 1953

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?

angular typescript javascript
3 Answers

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>
user_88889390

What about using Validators and making nameSigner a required field? Your FormGroup will then only be valid, if all FormControls that have a required Validator are filled.

making the control required:

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

check if all have a value:

getCompiledFeq(){

  if(this.availableSigners.valid){
     return true;
  }
  return false;
 }

Angular Documentation for Validators: https://angular.io/guide/form-validation#reactive-form-validation

user_15681950

From that forms you first set as nullValidator as your suggestion you set as required means 

//Add in your TS and check
   get form() { return this.availableSigners .controls }

that form is you add 

 if(this.availableSigners.valid){
     return true;
  }
else{
for(let i in this.availableSigners.controls){
  this.availableSigners.controls[i].markAsTouched();
}
}
 }
user_90872150
Related