Angular 在（更改）事件回调中具有旧值的反应形式

Question

考虑一个带有输入的 Angular 反应形式。每当输入发生变化时，我们都希望保留其旧值并将其显示在某个位置。以下代码按显示的方式执行：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Reactive Form';
  changedValue;
  oldValue;
  ooldValue;
  rform = new FormGroup({
    inputOne: new FormControl('chang me')
  });


  onOneChange(event) {
    this.changedValue = event.target.value;
    console.log('oneChanged', this.changedValue, 'old value is', this.oldValue);
    this.ooldValue = this.oldValue;
    setTimeout( ()=>this.oldValue = this.changedValue, 1);
  }
}

<form [formGroup]="rform">
    <label>
      One:
      <input formControlName="inputOne" (change)="onOneChange($event)"/>
    </label>
  </form>
  <p>
    changed value: {{changedValue}}
  </p>
  <p>
        old value: {{ooldValue}}
  </p>

如您所见，已通过在代码中保留三个变量来解决此问题，这是不可取的（是的，可以删除 changedValue 变量，但仍然有两个变量来保留旧值很烦人，是吗？不是吗？）。

有什么办法可以改写代码少一些变量吗？ Angular 本身有下降的方法吗？

您可以找到代码here

Answer 1

valueChanges 是一个 Observable，因此您可以通过成对管道获取订阅中的上一个和下一个值。

// No initial value. Will emit only after second character entered
this.form.get('inputOne')
  .valueChanges
  .pipe(pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );
// Fill buffer with initial value, and it will emit immediately on value change
this.form.get('inputOne')
  .valueChanges
  .pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

Answer 2

this.rform
   .controls["inputOne"]
   .valueChanges
   .subscribe(selectedValue => {
        console.log('New Value: ', selectedValue);       // New value
        console.log('Old Value: ', this.rform.value['inputOne']); // old value
   });

Angular 在（更改）事件回调中具有旧值的反应形式

Angular reactive form having the old value on (change) event callback

javascript

angular2-forms

angular

angular-reactive-forms

angular-event-emitter