Angular，FormControl-确认值更改

Question

我有表单控件用于选择一些值（例如-性别）和<input type="radio">对。下一个要求是：

1. [当用户更改输入时，我需要显示一个模式窗口，要求他确认或取消更改（不做任何事情）。
2. 仅当用户将输入值从一种性别更改为另一种时，我才需要显示模式。

我的[[问题”是FormControl仅具有valueChanges事件，该事件发出after值已被更改。我需要以编程方式设置先前的值：

this.genderControl.setValue(GenderEnum.MALE, {emitEvent: false});

一些伪代码示例：

component.html

<input
  formControlName="gender"
  type="radio"
  value="female"
  id="female"
/>
<input
  formControlName="gender"
  type="radio"
  value="male"
  id="male"
/>
<input
  formControlName="gender"
  type="radio"
  value="other"
  id="other"
/>

component.ts
this.genderControl.valueChanges
  .pipe(
    distinctUntilChanged(),
    startWith(null),
    pairwise(),
    takeUntil(this._destroy$)
  ).subscribe(([prev, next]: [GenderEnum, GenderEnum]) => {
    this.openWarningModal().afterClosed().subscribe((selectedAction: CommonModalsActionsEnum) => {
      if (selectedAction === CommonModalsActionsEnum.CONFIRM) {
        this.handleChangeGender(next);
      }

      if (selectedAction === CommonModalsActionsEnum.CLOSE) {
        this.genderControl.setValue(prev, {emitEvent: false});
      }
    });
  });

可能的
解决方案

可能在删除FormControl中，使用ngModel和input click事件的订阅。通过这种方式，单击处理程序将显示模式并更改或不更改与ngModel相关的var。但是我希望存在更清晰的解决方案！

Answer 1

如果您打算使用ngModel，则可以订阅[]而不是订阅click事件。

ngModelChanges()

event，它是ngModel指令的@Output。模型更改时会触发。