mardi 12 mai 2020

Toggle button of type input changes the state on calling 'submit' api. How to prevent it from switching on

I have a code. THe input and output works as expected. Only from UI side though, the toggle button is not working properly. i.e. the initial state is on and then I change it to off but while submitting, the toggle button is turned on again by itself. But the values are displayed as selected i.e. Y in case of true and N in case of false. Only the button gets switched on and I need to prevent it.

When I again load the page, it shows the selected value. Problem arises only after I save with 'N' value and then submit it.

Here is the code:

html

// toggle button
          <div class="col-md-4">
                      <div class="form-group radioWrap mt-3">
                        <label>Is Entity Active?*</label>
                        <div class="col-md-4">
                          <label class="custom-toggle" >
                            <input type="checkbox" name="isActive [(ngModel)]="submitData.basicDetails.isActive" 
                            (ngModelChange)="updateBooleanValue($event)">
                            <span class="custom-toggle-slider rounded-circle"></span>
                          </label>
                        </div>
                      </div>
                  </div>

    // submit and save btn
         <button id="submitform" class="btn-sq btn btn-sm btn-secondary pull-right ml-2 mr-0" 
                        (click)="submitForm('submit')" [disabled]="!basicForm?.valid || submitDisable()" placement="top"
                        tooltip="Submit Entity" container="body">
                        <i class="lni-thumbs-up iconsize2"></i>
                      </button>
                      <button id="saveform" class="btn-sq btn btn-sm btn-secondary pull-right ml-2 mr-0"
                        (click)="submitForm('save')" [disabled]="!basicForm?.valid || submitDisable()" placement="top" tooltip="Save Entity"
                        container="body">
                        <i class="lni-save iconsize2"></i>
                      </button>

ts

   submitForm(action) {
    // on save/submit click change URL.
    const myURLMaster = action === 'save' ? '/entitysave' : '/entitysubmit';
    // check for issuer selection
    if (this.yieldValid()) {
        // check for yield curve type uniqueness
        if (this.confirmYieldCurve()) {
            const obj = {
                conservativeRating: null,
                conservativeRatingId: null,
                rated: 'N',
                ratingDetails: []
            };
            const input = {
                basicDetails: this.submitData.basicDetails,
                entityRating: obj,
                otherDetails: null,
                contactDetails: null
            };
            if (this.submitData.basicDetails.isActive === false || this.submitData.basicDetails.isActive === 'N') {
                this.submitData.basicDetails.isActive = 'N';
            } else if (this.submitData.basicDetails.isActive === true || this.submitData.basicDetails.isActive === 'Y') {
                this.submitData.basicDetails.isActive = 'Y';
            }
            console.log(this.renderData);
            console.log(input);
            // on save/submit click change URL.
            const diffJson = this.diffPatcher.diff(this.submitData.basicDetails, this.renderData);
            console.log(diffJson);
            this.DataService.getPortfolioData(myURLMaster, input).subscribe(
                data => {
                    if (data.validationStatus === 'ERROR') {
                        const errorMsgs: any = data.errorMsgs;
                        this.DataService.errorSwal(errorMsgs[0].errorMsg);
                    } else if (data.validationStatus === 'SUCCESS') {
                        this.DataService.successTimerSwal(data.data);
                        setTimeout(() => {
                            if (action === 'submit' || action === 'save') {
                                this.router.navigate(['/entityCMaster']);
                            }
                        }, 2000);
                    }
                },
                errorCode => {
                    if (errorCode.status === 400) {
                        this.DataService.errorSwal(JSON.stringify(errorCode));
                        setTimeout(() => {
                            this.blockUI.stop();
                        }, 500);
                        // alert(JSON.stringify(errorCode));
                    }
                }
            );
        }
    }
}

where this.submitData.basicDetails.isActive is value to be sent




Aucun commentaire:

Enregistrer un commentaire