mardi 3 avril 2018

Method bound to checked attribute of angular mat-checkbox is triggered multiple times

I have a nested JSON array through which I'm iterating to display data. Each object is rendered as a checkbox, and if the value associated with the nested option called 'checked' is true, checkbox is checked. And if the field is unchecked 'checked' option is set false. Below is the HTML code and sample JSON with one object:

<ng-container *ngFor="let dm of data; let lst = last; let midx = index;">
  <mat-expansion-panel class="mar-bot-1">
    <mat-expansion-panel-header>
      <mat-panel-title>
         &nbsp;&nbsp;
      </mat-panel-title>
    </mat-expansion-panel-header>
    <section>
      <div *ngFor="let fd of dm.fields; let lst = last; let fst = first; let fidx = index;">
        <div class="row pad-left-1">
          <div class="col-md-12 col-xs-12">
                <mat-checkbox class="example-margin" color="primary" [checked]="checkSelected(midx, fidx)" (change)="onFieldChange(midx, fidx, $event)"
                [disabled]="fd.field.required || fd.field.foreignkey" disableRipple>
                
                <span *ngIf="fd.field.required" matTooltip="This field is required" style="color:#dc3545;">*</span>
                </mat-checkbox> &nbsp;
            </div>
        </div>
      </div>
    </section>
  </mat-expansion-panel>
</ng-container>

JSON:

data : [
    {   
        name: 'ABC',
        description: ''
        fields: [
            {
                field: {
                    fieldname: 'field1'
                    required: true
                },
                options: [
                    { field: {
                        fieldname: 'checked',
                        fieldtype: boolean,
                        fieldvalue: true
                      }
                    },
                    { field: {
                        fieldname: 'someoption'
                        fieldtype: string,
                        fieldvalue: 'maybestring'
                      }
                    }
                ]
            },
            {
                field: {
                    fieldname: 'field2'
                    required: false
                },
                options: [
                    { field: {
                        fieldname: 'checked',
                        fieldtype: boolean,
                        fieldvalue: false
                      }
                    },
                    { field: {
                        fieldname: 'someoption2'
                        fieldtype: string,
                        fieldvalue: 'maybestring'
                      }
                    }
                ]
            }
        ]
    }
]

When the page loads, checkbox is ticked by default by binding it to a method checkSelected() and on change onFieldChange() is called.

checkSelected(midx, fidx) {
    //iterate over data and look for fieldvalue of checked option and return the value
}

onFieldChange(midx, fidx, $event) {
    //Iterate over data and set value as per the event to checked option
}

But the issue is checkedSelected() is called multiple times on page load / open or close expansion panel / when checkbox is checked which calls onFieldChange().

I'm sure that there is no hidden calls being made to checkedSelected(), but somehow it is called multiple times leading to expressionChangedAfterItHasBeenCheckedError whenever I try setting some flags (required for other logic).

Any help is much appreciated if anybody could guide me to understand why is a function bound to an attribute is triggered multiple times and how to fix it!




Aucun commentaire:

Enregistrer un commentaire