5

我正在使用 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 调用的屏幕截图：

进行 API 调用

4

1 回答 1

0

Angular 在每次值更改时执行请求。仅当同步验证器通过“以避免潜在的昂贵异步验证过程（例如 HTTP 请求）”时，文档才指定异步验证器

这是我认为正在发生的事情：

  • updateOn: 'blur'用于用户交互。当您通过代码更改值时，它不适用。

  • 您实例化表单-> 验证器被触发，触发请求。

  • 你patchData()在setValue()-> 验证器再次被触发。

  • 我猜 Angular 在内部使用 switchMap 来验证 Observable，如果您更改了值，这将解释取消

我不知道您如何获得 9 个请求，因为我需要查看完整代码（@EstusFlask 已评论，http ://stackoverflow.com/help/mcve ）。

什么可能有帮助：

  • 添加一些同步验证器。Validators.required将避免请求空值，包括初始值''

  • 创建表单后，不要单独修补默认值，而是计算创建的默认值。
    在默认为空的情况下不需要required，但在其他情况下需要，我发现它更干净。

    const defaultDocumentNumber = this.data.edit ? this.data.document.documentNumber : '';
...
documentNumber: new FormControl(defaultDocumentNumber, ...

  • 我猜您在表单中有其他控件正在触发验证。这可能解释了你是如何接到 9 个电话的。
    如果是这种情况，您可以使用FormControl.patchValue()的第二个参数来避免一些验证触发器options，特别是emitEventandonlySelf字段。
    同样，如果没有可重复的例子，真的不能说。看看文档。

于 2021-06-23T08:21:26.640 回答