So basically those values are from 5 different checkboxes. How do we check that if one value is false then show then call this.showContingencyPopup();

How do we cleanly check from multiple variables if one value is false , for example I have 5 values from separated checkboxes, if user select one box then isValid true , but if user did not select even one box then its false and then call this.showContingencyPopup(); . Thanks,

The problem with my current solution is that for example I select 2 checkboxes the result is still false

but they are not in an array so I dont wanna create multiple if else statements

enter image description here

 checkIfHasFalse() {
    let isValid = true;
    if(this.dealDispositionFormFields.isAnyContingencies) {
      if(!this.dealDispositionFormFields.isFinancingContingency) {
        isValid = false;    
      }
      if(!this.dealDispositionFormFields.isSitePlanApprovalContingency) {
        isValid = false;    
      }
      if(!this.dealDispositionFormFields.isPermitApprovalContingency) {
        isValid = false;    
      }
      if(!this.dealDispositionFormFields.isTenantApprovalContingency) {
        isValid = false;    
      }
      if(!this.dealDispositionFormFields.isOtherContingency) {
        isValid = false;    
      }
    }
this.showContingencyPopup();
}

#html code

<div class="deal-disposition-row"></div>     
            <div class="contingency-checkbox">
            <mat-checkbox
             color="primary"
             style="margin-left:10px;"
             name="isAnyContingencies"
             [(ngModel)]="dealDispositionFormFields.isAnyContingencies"
             (change)="changeContingency($event)"
              >
             <div class="deal-text-label">
              Any Contingencies?
            </div>
            </mat-checkbox>
            </div>
            <span  *ngIf="dealDispositionFormFields.isAnyContingencies" >
              <ul>
                <li>
                    <div >
                        <mat-checkbox class="checkbox-margin" color="primary"
                         #checkbox
                         name="isFinancingContingency"
                         [(ngModel)]="dealDispositionFormFields.isFinancingContingency"
                         >
                         <div class="deal-text-label" >
                          Financing Contigency
                         </div>
                        </mat-checkbox>
                    </div>
                </li>
                </ul>
                <ul>
                  <li>
                      <div>
                          <mat-checkbox class="checkbox-margin" color="primary"
                           #checkbox
                           name="isSitePlanApprovalContingency"
                           [(ngModel)]="dealDispositionFormFields.isSitePlanApprovalContingency"
                           >
                           <div class="deal-text-label" >
                            Site Plan Approval Contigency
                           </div>
                          </mat-checkbox>
                      </div>
                  </li>
                  </ul>
                  <ul>
                    <li>
                        <div >
                            <mat-checkbox class="checkbox-margin" color="primary"
                             #checkbox
                             name="isPermitApprovalContingency"
                             [(ngModel)]="dealDispositionFormFields.isPermitApprovalContingency"
                             >
                             <div class="deal-text-label" >
                              Permit Approval Contingency
                             </div>
                            </mat-checkbox>
                        </div>
                    </li>
                    </ul>
                    <ul>
                      <li>
                          <div >
                              <mat-checkbox class="checkbox-margin" color="primary"
                               #checkbox
                               name="isTenantApprovalContingency"
                               [(ngModel)]="dealDispositionFormFields.isTenantApprovalContingency"
                               >
                               <div class="deal-text-label" >
                                Tenant Approval Contingency
                               </div>
                              </mat-checkbox>
                          </div>
                      </li>
                      </ul>
                      <ul>
                        <li>
                            <div>
                                <mat-checkbox id="otherContingency" class="checkbox-margin" color="primary"
                                 #checkbox
                                 name="isOtherContingency"
                                 [(ngModel)]="dealDispositionFormFields.isOtherContingency"
                                 >
                                 <mat-form-field appearance="fill" >
                                  <mat-label>Other Contingencies</mat-label>
                                  <input [disabled]="!dealDispositionFormFields.isOtherContingency" name="otherContingencies" matInput
                                      [(ngModel)]="dealDispositionFormFields.otherContingencies" />
                                  <div *ngIf="hasContingencyError" class="mat-form-field-subscript-wrapper custom-contingency-mat-error" >
                                    <div class="mat-error" *ngIf="hasContingencyError" >This is a required field.</div>                        
                                  </div>
                                </mat-form-field>
                
                              <div id="otherContingenciesError"></div>  
                                </mat-checkbox>
                            </div>
                        </li>
                        </ul>
            </span>

CodePudding user response：

Just keep it simple:

checkIfHasFalse() {

   if(this.dealDispositionFormFields.isAnyContingencies) {

      if(
         this.dealDispositionFormFields.isFinancingContingency
         || this.dealDispositionFormFields.isSitePlanApprovalContingency
         || this.dealDispositionFormFields.isPermitApprovalContingency
         || this.dealDispositionFormFields.isTenantApprovalContingency
         || this.dealDispositionFormFields.isOtherContingency
     } {         this.showContingencyPopup();    }
   } else { this.showContingencyPopup(); }

}

NOTE: You have to put this part: else { this.showContingencyPopup(); } just if you want to show the popup also when the check this.dealDispositionFormFields.isAnyContingencies is not selected.