Angular 将 ngModel 输入字段恢复为之前的值

Question

我使用的是 Angular 10 和 Nebular 6。

我想要实现的目标：

我有一个表单，其中有两个输入日期字段，

start of project

和

end of project

。用户是否想要输入无效日期（使用 nb-datepicker），假设

start of project

在

end of project

之后，表单必须禁止它并立即将更改的字段值设置回之前的值。

我已经尝试过但没有运气：

• 放置在

  (ngModelChange)="validateDate($event)"

  之前

  [(ngModel)]="startOfProject"

  。它创造了不可预测的行为。
• 全部删除

  [(ngModel)]

  并添加

  (change)="validateDate($event)

  并保留旧值。后来我发现这是一种不好的编码习惯并且不可维护。

在 AngularJS 中，有

$scope.$watch

可以轻松获取前一个值。 Angular 10 执行此操作的方法是什么？

Answer 1

您可以使用

rxjs pairwise

HTML

    <form [formGroup]="dateForm">
    <mat-form-field style="margin-right: 10px;">
        <input matInput [matDatepicker]="picker" formControlName="startdate" placeholder="Start date"/>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
        <input matInput [matDatepicker]="picker2" formControlName="enddate" placeholder="End date"/>
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
    </mat-form-field>
</form>

TS

dateForm = this.formBuilder.group({
    startdate: [null, Validators.required],
    enddate: [null, Validators.required],
});

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
    this.dateForm.valueChanges.pipe(
        startWith({ oldValue: null, newValue: null }),
        distinctUntilChanged(),
        pairwise(),
        map(([oldValue, newValue]) => { return { oldValue, newValue } })
    )
    .subscribe({
        next: (val) => {
            console.log(val)
        }
    });
}