Angular 6 : don't trigger validators setValue

Question

我正在使用 Angular 6. 构建一个 CRUD 应用程序。

我的表单用于添加和更新项目。当用户更新项目时，表单会从服务器预填充。当服务器更新表单时，它会触发验证。

如何在不触发验证的情况下更新表单值？

相关代码如下:

ngOnInit(){
    this.form = this.fb.group({
        name: ['', [Validators.required], MyAsyncValidator],
        comments: [''],
    });

    this.http.get('/api')
        .subscribe((data: any) => {
            this.form.setValue({ name: data.name, comments: data.comments });
        });
    //How to populate form without triggering validation
}

模板:

<form [formGroup]="form">
<div class="form-group row">
    <label class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
        <input formControlName="name"
            class="form-control"
            [ngClass]="{'is-invalid': isInvalid(form.controls.name)}"
            type="text">
        <small *ngIf="form.get('name').status=='PENDING'" class="form-text text-muted">
            <i class="fa fa-spinner fa-spin"></i> Checking Name...
        </small>
        <small class="invalid-feedback">
            <div *ngIf="form.controls['name'].hasError('required')">Name Required</div>
            <div *ngIf="form.controls['name'].hasError('exists')">Name Exists</div>
        </small>
    </div>
</div>

Answer 1

我认为这要么是 Angular 错误，要么是代码中实现的一些奇怪行为。我遇到了同样的问题，调试了源代码才发现:

setValue 将调用 updateValueAndValidity():https://github.com/angular/angular/blob/39c8baea318e740111b1c748718c3203a61b4cdf/packages/forms/src/model.ts#L941

在 updateValueAndValidity() 中，它调用 asyncValidatior: https://github.com/angular/angular/blob/39c8baea318e740111b1c748718c3203a61b4cdf/packages/forms/src/model.ts#L554

我的印象是，当设置emitEvent: false 时，不应触发任何验证，但事实并非如此。更奇怪的是，无论您将 updateOn 设置为 change 还是 blur，asyncValidator 都会在 setValue 上触发。

我别无选择，只能在每次调用 setValue 之前删除 asyncValidator，然后再将其添加回去。