弹出消息不等待用户响应并继续 onclick 功能

Question

我有更改单选按钮选择的逻辑，如果用户进行了一些更改，我会显示一条消息。如果他确认就进入Onconfirm，否则-Onreject。

1 期 ->单选按钮的变化发生在消息显示之前。

2 issue -> 一个 reject 我想取消他所做的选择并撤消他最后的选择 - 但没有发生。

请帮帮我！！

单选按钮

  <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>

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

}

拒绝

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

----根据@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);
  }



  }`

代码在没有条件的情况下可以完美运行 --edited - 从服务器获取值并修补它 - 单选按钮丢失

Answer 1

“关键”在 [ngModel] 和 (ngModelChanged)

中拆分 [(ngModel)]

//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"
    });
}

嗯，问题是元素仍然显示选择的值如何解决？第一个是使用 ViewChildren 获取我们的 p-radio 按钮，所以我们给了一个模板引用变量（对所有按钮都一样）见 #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);
        })
      }
    });
  }

如果你用的是响应式Forms，你也可以顺便用一个[ngModel]（ngModelChange），看到model是myForm.get('selectedType').value

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

并更改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"
    });
}

一个simple stackblitz

好吧，在 stackblitz 中，我对 formGroup 的值进行了硬编码。通常我们有一个服务，所以我们可以 1.-定义我们的表单

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

//And in ngOnInit

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

或 2.-简单声明我们的表单

form:FormGroup

//and in ngOnInit

在 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)
  })

})

如果需要默认值，可以先给定值

（stackblitz 在代码中有这个选项）

Answer 2

我的代码有问题（另一个答案）。真的我不太确定原因，所以我创建了一个像

这样的函数

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

所以，我的函数“问”变成了

  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()
      },
    });
  }

这允许我在更改表单时调用重绘函数。如果我有一个函数

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

我可以做一些像

  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()
  }

在 this stackblitz 中查看如果我们不调用 this.redraw() 会发生什么（只需注释行）

1.-Select“纽约”然后说你不要 2.-点击按钮加载用户

由于“user”的类型为 3 -“new York”，单选按钮看起来像是未被选中。

是的，这是一个丑陋的解决方法，但现在我无法想象另一个解决方案

还有另一种方法，就是像往常一样更改值，如果我们说我们不想要该值，return 旧值

  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);
      },
    });
  }

弹出消息不等待用户响应并继续 onclick 功能

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

javascript

angular

primeng