mardi 28 novembre 2017

Angular - inconsistent behaviour when programmatically checking checkboxes on ngOnInit

I have a form that I'm populating with information from the database when I pull a record, and part of the information I'm pulling is from what is a many to many relationship in the database, and in this particular case, for each record that exists, the appropriate checkbox gets checked.

What it bizarre for me, is that I can reload the page, and in some instances the checkboxes check, and others they do not. I suspect the asynchronous nature of javascript is to blame but I'm not sure. The following is the relevant code.

The ngOnInit method that initializes the form and if the change id exists, pulls the information from the database for that record through the getChange(id) method.

ngOnInit(): void {
// (initialize form and form groups.)...
this.sub = this.route.params.subscribe(
      params => {
        const id = +params['id'];
        this.getChange(id);
      }
    );
}

In this method I only included one of the relevant methods that call onChangeTypesReceived, which actually checks the boxes should the proper values be passed in.

getChange(id: number): void {   
    this.changeService.getChangeTypes(id)
      .subscribe(
      changeTypes => this.onChangeTypesRetrieved(changeTypes),
      (error: any) => this.errorMessage = <any>error
      );
}

Finally the method that checks the boxes and populates text fields based on whether the proper values are returned.

onChangeTypesRetrieved(changeTypes: any[]) {
    Array.from(changeTypes).forEach(changeType => {
      console.log('changeType: ' + changeType);
      if (changeType.TypeofChangeId === this.typeOfChangeEnum['SRV Package']) {
        this.changeForm.get('changeOverviewFG.srvCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.srvPackage').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['WKS Package']) {
        this.changeForm.get('changeOverviewFG.wksCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.wksPackage').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['GPO']) {
        this.changeForm.get('changeOverviewFG.gpoCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.gpo').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['AD']) {
        this.changeForm.get('changeOverviewFG.adCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.ad').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Manual Fix']) {
        this.changeForm.get('changeOverviewFG.manualCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.manualFix').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Network']) {
        this.changeForm.get('changeOverviewFG.networkCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.network').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Hardware']) {
        this.changeForm.get('changeOverviewFG.hardwareCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.hardware').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Infrastructure']) {
        this.changeForm.get('changeOverviewFG.infraCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.infrastructure').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Vendor Supported']) {
        this.changeForm.get('changeOverviewFG.vendorCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.vendorSupported').patchValue(changeType.Description);
      } else if (changeType.TypeofChangeId === this.typeOfChangeEnum['Other']) {
        this.changeForm.get('changeOverviewFG.otherChangeCheck').patchValue(true);
        this.changeForm.get('changeOverviewFG.otherTypeOfChange').patchValue(changeType.Description);
      }
    })
  }

So I can refresh the page and only some of the time do the proper checkboxes actually check. So I am hoping someone might be able to tell me what I should include in my code to make sure this executes properly every time.

Thanks so much in advance!




Aucun commentaire:

Enregistrer un commentaire