Angular，FormControl - 确认值更改

Question

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

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

我的问题是 FormControl 有 valueChanges 事件，它在 值已经改变之后发出。 而且我需要以编程方式设置以前的值：

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

组件.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。它在模型更改时触发。