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

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

Answer

The “key” is split the [(ngModel)] in [ngModel] and (ngModelChanged)

//NOT WORK yet
<p-radioButton ... [ngModel]="selectedType"
             (ngModelChange)="askConfirm($event)">

askConfirm(value: any) {

    this.confirmationService.confirm({
        message: 'Are you sure do you want '+value+'?',
        header: 'Delete Confirmation',
        icon: 'pi pi-info-circle',
        accept: () => {
            this.selectedType=value
        },
        reject: () => {
        },
        key: "positionDialog"
    });
}

Well the problem is that the element still show the value selected How resolved? The first is get our p-radio buttons using ViewChildren, so we are give a template reference variable (the same to all the buttons) see the #radio

    <div *ngFor="let type  of types" class="p-field-radiobutton">
        <p-radioButton #radio ... 
           (ngModelChange)="ask($event)" 
           [ngModel]="oneselectedType" ></p-radioButton>
    </div>

  //get the "radio buttons"
  @ViewChildren('radio', { read: RadioButton }) radios!: QueryList<RadioButton>

  constructor(private confirmationService: ConfirmationService) { }

  ask(value: any) {
    this.confirmationService.confirm({
      message: 'Do you want to choose this?',
      header: 'Choose Confirmation',
      icon: 'pi pi-info-circle',
      key: 'positionDialog',
      accept: () => {
        //if accept
        this.oneselectedType = value
      },
      reject: () => {
        //else, we loop over all the "radios"
        this.radios.forEach(x => {
          //and force is checked
          x.writeValue(this.oneselectedType);
        })
      }
    });
  }

If you’re using reactive Forms, you can also use a [ngModel] (ngModelChange) in the way, see that the model is myForm.get('selectedType').value

<p-radioButton ... [ngModel]="myForm.get('selectedType').value"
             (ngModelChanged)="askConfirm($event)"
             [ngModelOptions]="{standalone:true}"
 >

And change in askConfirm

askConfirm(value: any) {

    this.confirmationService.confirm({
        ...
        accept: () => {
            this.form.get('oneselectedType').setValue(value)
        },
        reject: () => {
        this.radios.forEach(x => {
          //and force is checked
          x.writeValue(this.form.value.oneselectedType);
        })
        },
        key: "positionDialog"
    });
}

a simple stackblitz

Well, In the stackblitz I hard-code the value of the formGroup. Generally we has a service so we can 1.-Define our Form

  form=new FormGroup({
    selectedCity:new FormControl(),
    selectedColor:new FormControl(),
    prop:new FormControl()
  })

//And in ngOnInit

this.dataService.getData().subscribe(res=>{
  this.form.patchValue(res)
})

Or 2.-simple declare our form

form:FormGroup

//and in ngOnInit

use in ngOnInit

this.dataService.getData().subscribe(res=>{
  this.form=new FormGroup({
    selectedCity:new FormControl(res.selectedCity),
    selectedColor:new FormControl(res.selectedColor),
    prop:new FormControl(res.prop)
  })

})

If we need a default value, we can give the value at first

(the stackblitz has in code this options)