在Angular响应式表单中监听表单有效状态的变化

Question

我有一个相当复杂的页面，其中有许多嵌套的组件，其中一些有带有输入的表单(大多数是响应式的，尽管我确信在某个地方有一些模板驱动的表单)。页脚有一个"提交"按钮，只有当所有表单上的所有输入都有效时才会启用。

我决定创建一个"页面有效性"服务。它将保存所有无效表单的列表，并公开一个'is valid'的可观察对象供按钮使用。这意味着每个组件都必须调用"将我添加到无效表单列表"。或者"将我从无效表单列表中删除";当表单的有效性发生变化时。为了尽量减少调用的数量，我只想在表单状态真正发生变化时进行调用(即从有效到无效或反之亦然)。我试过订阅statusChanges:

this.formGroup.statusChanges.subscribe((status) => {}

，但每次值更新(我设置为onBlur)时，不管状态是否改变，都会触发。事实上，它似乎与onChanges同时启动。是否有一种方法仅在有效性实际更改时由表单通知，或者我必须在每个组件中手动执行检查?该项目在Angular 13中。

Answer 1

是的，可以通过使用distinctUntilChanged操作符省略您不感兴趣的多余事件。

试一试:

this.formGroup.statusChanges.pipe(distinctUntilChanged()).subscribe((status) => {
console.log(`the new status is ${status}`);
});

Answer 2

如果您想在表单控件中实现相同的功能，您可以这样做:

const control: AbstractControl = this.form.controls[<your_control_name>];
control.statusChanges.subscribe((currentStatus) => {
const previousValue = this.form.value[key];
const newControl = new FormControl;
newControl.setValidators(control.validator);
newControl.setValue(previousValue, { emitEvent: false });
const validatorFunction = newControl.validator;
const res = validatorFunction?.call(this, newControl);
let prevStatus: string = res != null ? 'INVALID' : 'VALID';
console.log('Control previous status', prevStatus);
console.log('Control current status', currentStatus);
if (prevStatus != currentStatus) {
console.log('Status changed');
}
});