Angular 2 更改前后

Posted 2023-02-22

【中文标题】Angular 2 更改前后

【英文标题】：Before change and after change in Angular 2

【发布时间】：2018-07-13 02:37:23

【问题描述】：

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

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

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

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

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

【问题讨论】：

对于旧值，您可以尝试this answer中给出的建议。顺便说一句，ngModelChange 的事件给出了新的值。您可以在模板引用变量的帮助下获取该字段，但我不知道是否必须为每个字段设置一个变量以满足您的需求。

【参考方案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
        
    );