在 form.setValues() 上多次触发异步验证

Question

我正在使用 Angular 5，反应形式方法。

我在 Angular Material 对话框中有一个表单，用于输入和编辑数据。我的构造函数如下所示：

constructor(public formBuilder: FormBuilder,
    public documentService: DocumentService, 
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.createForm();
    if (this.data.edit) {
        this.setValues();
    }
    this.setTitles();
}

该createForm调用创建了我进行异步验证的反应式表单：

createForm() {
    this.documentForm = this.formBuilder.group({
        ...
        documentNumber: new FormControl('',
                {
                    updateOn: 'blur',
                    validators: [Validators.required],
                    asyncValidators: [this.checkDocumentNumber.bind(this)]
                }),

        ...
    });
}

如果对话框处于“编辑”模式，则setValues调用会修补需要编辑的数据：

setValue() {
    this.form.patchData({
        ...
        documentNumber: this.data.document.documentNumber
        ...
    });
}

该setTitles调用设置对话框标题。

该checkDocumentNumber调用boolean从服务器获取一个值：

checkDocumentNumber(control: AbstractControl): Observable<ValidationErrors | null> {
    const formValue = this.form.value;
    return this.documentService
        .checkDocumentNumber(new Document(this.data.edit ? this.data.document.id : 0,
            form.documentNumber)).pipe(map((response: boolean) => {
            return response ? { inUse: true } : null;
        }));
}

进行的 API 调用是：

checkDocumentNumber(doc: Document) {
    return this.http.post(`/Documents/Inbox/CheckDocumentNumber`, doc);
}

“编辑”模式下的表单对话框是这样调用的：

this.dialogService.open(DocumentDialogComponent,
    {
        data: {
            edit: true,
            document: this.document
        }
    });

我遇到的问题是，当我打开对话框来编辑文档数据时，会调用 9 个 API 来检查文档编号。前 5 个被取消，然后一个返回200，另一个被取消，最后两个返回200。

应用程序不同部分的相同场景让我取消了 3 个200电话和两个电话。

如何阻止 angular 进行这些不必要的 API 调用？在 Angular 5 之前，updateOn标志并不存在，所以我认为如果没有这个标志，这将不会发生。

这是正在进行的 API 调用的屏幕截图：

Answer 1

您可以使用 debouncePromise 函数来减少触发次数。可能是视图重新渲染导致的。

asyncValidators: [debouncePromise(this.checkDocumentNumber.bind(this))]