Check all control forms

3
votes

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?

3
javascriptangulartypescript
can you take a snapshot of your form? - Dusan Radovanovic
they said me to change the FormGroup now in this -- this.availableSigners = new FormGroup({ mailSigner: new FormControl() }); without the nameSigner cause it's never used - travis_911
By the way I changed my getCompiledFeq() in this way getCompiledFeq(){ const controls = this.availableSigners.controls; for(const elem in controls){ console.log('elemzz ', controls[elem].value); if(controls[elem].value){ return true; }else{ return false; } } } but it seems not work - travis_911
Are you having a form with multiple form controls with the same name?? Can you take a snapshot, I am not quite sure how does your form look like - Dusan Radovanovic
yes there is a form with multiple form controls with the same name.. I can't take a snapshot - travis_911

3 Answers

2
votes

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>
0
votes

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

0
votes

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();
}
}
 }