0

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

1 个问题 ->单选按钮的更改发生在消息显示之前。

2 个问题 ->一个拒绝我想取消他所做的选择并撤销他最后的选择 - 这没有发生。

请在这件事上给予我帮助！！

单选按钮

  <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-从服务器获取值并对其进行修补-单选按钮丢失 2 来自 formGroup

4

2 回答 2

0

“关键”在 [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);
        })
      }
    });
  }

如果你使用的是响应式表单，你也可以顺便使用一个 [ngModel] (ngModelChange)，看到模型是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"
    });
}

一个简单的堆栈闪电战

好吧，在 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 在代码中有这个选项）

于 2021-10-22T06:53:25.633 回答
0

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

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

在这个 stackblitz中查看如果我们不调用会发生什么this.redraw()（只需评论这些行）

1.-选择“纽约”并说你不想要它 2.-单击按钮加载用户

由于“用户”的类型为 3 -“纽约”，因此单选按钮看起来没有被选中。

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

好吧，还有另一种方法，即像往常一样更改值，如果我们说我们不想要该值，则返回旧值

  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);
      },
    });
  }
于 2021-10-27T21:29:34.163 回答