validation - Angular Inside ngFor how to set [disabled] not working with multiple conditions

Question

I have ngFor inside i am trying [disabled] on button base on multiple conditions how can i do any one suggest me please. i don't know how to work [disabled] on inside of ngFor with multiple conditions. i have try both way [disabled]="option.value.dynamicAttributeList.length === countForColor" second [disabled]="option.value.dynamicAttributeList.length === countForSize || option.value.dynamicAttributeList.length === countForColor"

Here is code:-

  <div formArrayName="productOption">
          <div *ngFor="let option of productOptionForm['controls'].productOption['controls']; let i=index">
            <div [formGroupName]="i">
              <div class="col s12">
                <div class="col s3 option-icons-remove">
                  <!-- (click)="removeOption(i, option.value.productOptionId)"  -->
                  <span>
                    <i class="material-icons prod-optio-delete-icon" 
                      (click)="removeMainOptionAttribute(option.value.productOptionId)" 
                      (click)="productOptionForm['controls'].productOption['controls'].splice(i, 1)"
                      style="color: #e3503e" 
                      [title]="'REMOVE' | translate:lang">
                      remove_circle
                  </i>
                  </span>
                  <button type="button" mat-raised-button color="primary" class="prod-add-btn-align option-icons-btn"
                    (click)="onSelectOption(i, option.value.masterAttributeId)">{{option.value.masterAttributeName}}</button>
                </div>
                <div class="col s5">
                  <mat-form-field appearance="outline" class="common-form-field-width">
                    <mat-label>{{'PRODUCT_OPTION_REQUIRED' | translate:lang}}</mat-label>
                    <mat-select formControlName="productOptionRequired"
                      [placeholder]="'PRODUCT_OPTION_REQUIRED' | translate:lang" required>
                      <mat-option [value]="0">{{'YES' | translate:lang}}</mat-option>
                      <mat-option [value]="1">{{'NO' | translate:lang}}</mat-option>
                    </mat-select>
                    <mat-hint
                      *ngIf="(option.controls['productOptionRequired'].invalid && (option.controls['productOptionRequired'].dirty || option.controls['productOptionRequired'].touched)) || (option.controls['productOptionRequired'].invalid && formSubmitted)">
                      <mat-error *ngIf="option.controls['productOptionRequired'].errors.required">
                        {{'REQUIRED' | translate:lang}}
                      </mat-error>
                    </mat-hint>
                  </mat-form-field>
                  <input type="hidden" formControlName="masterAttributeId">
                  <input type="hidden" formControlName="productOptionId">
                </div> 
                
                <!--Add Product Optins blue Button Start-->
                <div class="col s4" *ngIf="option.value.dynamicAttributeList">
                  <div class="prod-add-btn-opt">
                    <button type="button" mat-raised-button color="primary" 
                      [title]="'ADD_PRODUCT_OPTION' | translate:lang" [disabled]="option.value.dynamicAttributeList.length === countForColor" (click)="addOptionList(i)">
                      <i class="material-icons">add_circle</i> Test {{'ADD_PRODUCT_OPTION' | translate:lang}}
                    </button>
                  </div>
                </div> 
                <!--Add Product Optins blue Button End-->

              </div>
              
              <div *ngIf="option.value.dynamicAttributeList">
              
              Selected DB    {{  option.value.dynamicAttributeList.length }}
              Currernt Color {{  countForColor }}
              Current Size   {{ countForSize }}

              </div>



              <div formArrayName="optionList">
                <div *ngFor="let listObj of option.get('optionList').controls; let j = index">
                  <div [formGroupName]="j"> 
                    <div class="col s5"> 
                      
                   

                      <div class="col s5 no-padd">
                        <mat-form-field appearance="outline" class="common-form-field-width">
                          <mat-label>{{'PRODUCT_OPTION_VALUE' | translate:lang}}</mat-label>
                          
                          <mat-select formControlName="productOptionValue"
                            [placeholder]="'PRODUCT_OPTION_VALUE' | translate:lang"
                            (selectionChange)="setDynamicAtrributeList(option)" required>
                            <mat-option *ngFor="let attributeDetail of option.value.dynamicAttributeList"
                              [value]="attributeDetail.optionValue" [disabled]="attributeDetail.disabled === true"
                              [ngStyle]="{'background-color': attributeDetail.optionValue}">
                              {{attributeDetail.optionValue}}</mat-option>
                          </mat-select>
                          <mat-hint
                            *ngIf="(listObj.controls['productOptionValue'].invalid && (listObj.controls['productOptionValue'].dirty || listObj.controls['productOptionValue'].touched)) || (listObj.controls['productOptionValue'].invalid && formSubmitted)">
                            <mat-error *ngIf="listObj.controls['productOptionValue'].errors.required">
                              {{'REQUIRED' | translate:lang}}
                            </mat-error>
                          </mat-hint>
                        </mat-form-field>
                      </div>

                      

                      <!-- Delete Particular one options values start -->
                      <div class="col s1">
                        <div class="repeat-delete">
                          <i class="material-icons common-delete-icon"
                            style="color: #e3503e"
                            [title]="'REMOVE_PRODUCT_OPTION' | translate:lang"
                            (click)="option.controls['optionList'].controls.splice(j, 1)"
                            (click)="removeProductDetailValue(listObj)"
                           >remove_circle</i>
                        </div>
                      </div>  
                      <!-- Delete Particular one options values end -->


                      <div class="col s7">
                          <div class="custom-control custom-switch">
                            <mat-slide-toggle  (change)="onToggle($event,i,j)"   formControlName="isDefaultOption">  Is default option ? </mat-slide-toggle>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

Answer 1

I think your disable directive is not able to calculate option.value.dynamicAttributeList. Looking at the way you have used your ngfor below:

<mat-option *ngFor="let attributeDetail of option.value.dynamicAttributeList"
    [value]="attributeDetail.optionValue" 
    [disabled]="attributeDetail.disabled === true"
    [ngStyle]="{'background-color': attributeDetail.optionValue}">
    {{attributeDetail.optionValue}}
</mat-option>

and considering that option.value.dynamicAttributeList already works and correctly fetches data from your object using ngfor, I would suggest that instead of using disabled like this:

[disabled]="option.value.dynamicAttributeList.length === countForSize || option.value.dynamicAttributeList.length === countForColor"

use this and that should make it work:

[disabled]="option.value.dynamicAttributeList?.length === countForSize || option.value.dynamicAttributeList?.length === countForColor"

Reason: (?) here is known as 'safe navigation operator', it avoids throwing undefined or null exception when faced with any null values while accessing object properties.