角度材料输入验证未按预期工作

Question

我有一个输入字段，在（按键）上验证。然而，这并没有发生。它唯一有效的时间是我去另一个输入字段或点击并返回。这是我的代码。

  <mat-form-field>
    <input matInput placeholder="Network Address" name="network" [(ngModel)]="model.network" required (keypress)="validate($event)">
    <mat-hint>CIDR format, e.g. 192.168.65.0/25</mat-hint>
    <mat-error *ngFor="let error of errors_by_field['network']">{{error.message}}</mat-error>
  </mat-form-field>

  validate() {
    this.http.post<GetItemResult>('/api/branches', this.model).subscribe(data => {
        this.result = data;
        console.log(this.result);
        this.branch = data.item;
        this.errors_by_field = errors_by_field(data.errors);
        for (const [field, errors] of Object.entries(this.errors_by_field)) {
          if (field !== 'global') {
            this.form.form.controls[field].setErrors({server_error: true});
          }
        }
      },
      err => {
        this.submitting = false;
      });
  }

当我控制日志记录ts代码结果时，它会在每次按键时打印出结果，它只是在第一次触摸输入时没有显示。我必须点击其他地方并返回它才能工作

Answer 1

尝试(input)="validate($event)"instead (keypress)。我认为只有当焦点切换到另一个元素时才会执行keypress。

如果它不是反应形式，你也可以使用(ngModelChange)。

Answer 2

好的，所以我做了这样的事情并且有效:( <div *ngFor="let error of errors_by_field['network']"><mat-error *ngIf="error">{{error.message}}</mat-error></div>

我知道材料使用ErrorStateMatcher，但在我的情况下，这不适用于服务器端验证