时间戳

首页 > 解决方案 > 如何在更改双向绑定模型后向模板驱动的表单添加自定义错误？

angular - 如何在更改双向绑定模型后向模板驱动的表单添加自定义错误？

问题描述

在我的 Angular 应用程序中，我有一个带有双向绑定输入字段的模板驱动表单。如果提交失败，我想显示一条带有通用消息的错误。提交完成并失败后，我做的第一件事就是更改表单中使用的模型。然后，我在表单控件中添加了一个错误。

在此之后，表格将更新为新的模型值。而且，错误已被删除。所以我想它已经在那时再次得到验证。

下面是经过编辑的简化变体：

HTML 表单

<form #form="ngForm">
    <div *ngFor="let vehicle of vehicles; let i = index">
      <span>{{ vehicle.name }}</span>
      <mat-form-field>
       <input
        name="odoInputVehicle{{ vehicle.id }}"
        required
        type="number"
        matInput
        min="0"
        [(ngModel)]="vehicle.distance"
        [disabled]="vehicle.submittable === false"
        />
      </mat-form-field>
   </div>
</form>
<mat-error *ngIf="this.form.control.hasError('submissionFailed')">
  <div>Error submitting the value(s).</div>
</mat-error>

打字稿代码

@ViewChild('form', { static: false }) form: NgForm;

performRequests() {
  forkJoin(requests).subscribe(
    results => {
        // Result handling
    },
    error => {
        // Does something with the results

        // One or more requests failed
        // Model change
        succesResults.forEach(result => {
           this.vehicles[result.vehicleId].submittable = false;
        });

        // Apply an error to the form
        this.form.control.setErrors({
          submissionFailed: true
        });
    }
  );
 }

如何在更改模型后将错误添加到继续附加到表单的表单中。模型更新后是否会触发我可以用于此目的的事件？

标签： angularformsvalidationtwo-way-bindingcustom-error-handling

解决方案

像这样在 ts 文件中

this.quizForm.form.controls.email.setErrors({ unique: true });

而对于 HTML

          <div class="form-group">
            <label for="email">Email:</label>
            <input
              type="text"
              class="form-control"
              [ngClass]="{
                inputWrong:
                  (quizForm.submitted ||
                    quizForm.controls['email']?.touched) &&
                  quizForm.controls['email'].invalid
              }"
              id="email"
              name="email"
              pattern="[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$"
              [email]="true"
              [readonly]="isLoggedIn"
              [(ngModel)]="email"
              required
            />
            <span
              class="error_span"
              *ngIf="quizForm.controls['email']?.errors?.unique"
              >Email is already registered.</span
            >
          </div>

推荐阅读