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

Question

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

• 如果用户预先准备/推迟开始时间，我想预先推迟/推迟结束时间;
• 如果用户预先设定了结束时间，我也要预先确定开始时间;
• 如果用户推迟结束时间，我想什么都不做。

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

• 形式不是@Input，所以我不能听NgOnChanges。
• 我可以听每个(change)的<input>事件，但事件在模型更改后被触发，而$event对象只携带新值（据我所知）。
• 我可以听听每个(ngModelChange)的<input>，但这个事件只能带来 旧 新值，没有关于更改的表单控件的信息。

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

Answer 1

使用角度反应形式。您可以将所有控件添加到表单组，然后侦听每个控件的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
        }
    });