Question

我正在设计一个类似日历的表单。此表单有七个字段：日期和三对开始时间/结束时间。我想根据用户操作更新模型：

如果用户预先准备/推迟开始时间，我也要预先推迟/推迟结束时间;
如果用户预先设定了结束时间，我也想预备开始时间;
如果用户推迟结束时间，我想不再做任何事情。

为了了解用户是否推迟或推迟了一段时间，我正在考虑比较变更之前和之后的时间。虽然我能够在更改之后检索值，但我仍然找不到在更改之前检索值的方法。

表单不是@Input，因此我无法收听NgOnChanges。

我可以收听每个(change)的{{1}}事件，但事件在模型更改后被触发，而<input>对象只携带新值（至于我知道。）

我可以收听每个$event的{{1}}，但事件只带有旧的新值，没有关于更改的表单控件的信息。

那么，有没有办法知道哪个字段发生了变化，从哪个值变为什么值？

Answer 1

使用Angular反应形式。您可以将所有控件添加到窗体组，然后侦听每个控件的valueChanges事件。 valueChanges将提供新的价值。至于旧值，可以在页面加载并设置此表单时将值保存在变量中。当valueChanges触发时，您可以将旧值与新值进行比较。例如。

    this.calendarForm = new FormGroup({
            startTime: new FormControl('<current value>')
        }),
    });     
    this.currentStartTime = this.calendarForm.get('startTime').value;//existing value
    this.calendarForm.get('startTime').valueChanges.(newValue => {
        if ((newValue !== this.currentStartTime)
            //do something
        }
    });

更改之前和Angular 2中的更改之后

1 个答案: