在(更改)事件回调上具有旧值的角度反应形式

Question

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

@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本身有下降的方式吗？

你可以在这里找到代码

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
});