[FIXED] Pop up message not await for user response and moving on on onclick function

Issue

I have this logic on changing radio-button selection, if the user made some changing I am showing a message. if he confirm it will enter Onconfirm, else – Onreject.

1 issue -> the change of the radio button happens before the message show.

2 issue -> one reject I want to cancel the choice he made and to undo to his last choise – whice not happenning.

please help me with this!!

radio button

  <div class="right" *ngFor="let type of types">
    <p-radioButton  name="treesDetailsType"  [(ngModel)]="oneselectedType" formControlName="selectedType" (onClick)="onChangeType(type,$event)" class="treeDetails" value="{{type.id}}" label="{{type.desc}}" [disabled]="isReadOnly && type.id != data.selectedType"></p-radioButton>
  </div>

the function of onclick

  onChangeType(type, $event) {
    let isFormTouched = this.isFormTouched(type);

    
    if (isFormTouched) {
    this.messagingService.showConfirmById(44, () => {
      this.onConfirm()
  }, () => {
        this.onReject($event);
      
    });


}
else
   this.onchangedTrue(type); //this set some validators for the choice

} 

on reject

@HostListener('click', ['$event']) onReject($event) {
      event.stopImmediatePropagation();
    //whatever written here its not happens before the change !!!!!
    console.log(event);
  }

—-edited after the perfect suggestion from @Eliseo

 askConfirm(value: any) {
    let isFormTouched = this.isFormTouched(value);

    if (isFormTouched) {
      this.messagingService.showConfirmById(44, () => {
        this.oneselectedType = value;
        this.fg.controls.selectedType.setValue(value);
      }, () => {
        this.radios.forEach(x => {
          x.writeValue(this.oneselectedType);
        })
       

      },
      );


    }
    else {
      this.oneselectedType = value;
      this.onchangedTrue(value);
  }



  }`

the code work perfectly without the condition
–edited – on get the value from the server and patch it – the radio button lost
2 is fron the formGroup

Solution

There a problem in my code (the another answer). Really I’m not pretty sure the reason, so I create a function like

  redraw()
  {
    const value = this.form.value.type;
    this.radios.forEach((x) => {
      x.writeValue(value)
    });
  }

So, my function "ask" becomes like

  ask(value: any) {
    this.confirmationService.confirm({
      message: 'Do you want to choose ' + value + '?',
      header: 'Choose Confirmation',
      icon: 'pi pi-info-circle',
      key: 'positionDialog',
      accept: () => {
        this.form.get('type').setValue(value);
      },
      reject: () => {
        this.redraw()
      },
    });
  }

This allow me, when change the form, call to the function redraw. If I has a function

  getForm(data: any = null) {
    data = data || { type: 1, prop: '' };
    return new FormGroup({
      type: new FormControl(data.type),
      prop: new FormControl(data.prop),
    });
  }

I can do some like

  loadData(id: number) {
    this.dataService.getData(id).subscribe((res: any) => {
      this.form = this.getForm(res);
      //it's necesary call to the function this.redraw
      this.redraw()
    });
  }
  newData() {
    this.form = this.getForm();
    //it's necesary call to the function this.redraw
    this.redraw()
  }

See in the this stackblitz what happens if we don’t call to this.redraw() (just comment the lines)

1.-Select "new York" and say that you don’t want it
2.-Click the button to load user

As "user" has the type 3 -"new York", the radio buttons looks like that it’s not selected.

Yes is an ugly work-around, but for now I can not imagine another solution

Well there’re another approach, that is change the value as usually and if we say that we want not the value, return the old value

  askAfterChange(value:any)
  {
    const oldValue=this.form2.value.type;
    this.form2.get('type').setValue(value)
    this.confirmationService.confirm({
      message: 'Do you want to choose ' + value + '?',
      header: 'Choose Confirmation',
      icon: 'pi pi-info-circle',
      key: 'positionDialog',
      accept: () => {
      },
      reject: () => {
        this.form2.get('type').setValue(oldValue);
      },
    });
  }

Answered By – Eliseo

Answer Checked By – Senaida (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published