angular - Angular 2 更改前和更改后

Question

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

• 如果用户提前/推迟开始时间，我也想提前/推迟结束时间；
• 如果用户提前结束时间，我也想提前开始时间；
• 如果用户推迟结束时间，我什么也不想做。

为了了解用户是否提前或推迟了某个时间，我想比较更改前后的时间。虽然我能够在更改 之后检索值，但我仍然无法找到一种方法来检索更改之前 的值。

• 表格不是 @Input , 所以我不能听 NgOnChanges .
• 我可以收听 (change)每个<input>的事件, 但在模型更改后触发事件，并且 $event对象只携带新值(据我所知)。
• 我可以收听 (ngModelChange)每个 <input> , 但该事件仅携带旧新值，没有关于更改的表单控件的信息。

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

Answer 1

使用 Angular react 形式。您可以将所有控件添加到一个表单组，然后监听每个控件的 valueChanges 事件。 valueChanges 将提供新的值(value)。至于旧值，您可以在页面加载并设置此表单时将值保存在变量中。当 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
        }
    });