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

【问题标题】：Angular material input validation not working as expected角度材料输入验证未按预期工作
【发布时间】：2018-09-03 22:32:03
【问题描述】：

我有一个在（按键）上得到验证的输入字段。然而，这并没有发生。唯一有效的情况是我转到另一个输入字段或单击离开并返回。这是我的代码。

  <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 代码结果时，它会在每次按键时打印出结果，只是在第一次触摸输入时不显示。我必须点击其他地方并返回它才能工作

【问题讨论】：

同时显示您的 .ts 代码
请查看有问题的编辑

标签： angular angular-material angular-validation

【解决方案1】：

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

如果不是响应式表单，也可以使用(ngModelChange)。

【讨论】：

试过了，还是一样，试过（keyup/down），（ngModalChange），（input），开始认为问题出在Angular材料的其他地方
当我控制台记录 ts 代码结果时，它会在每次按键时打印出结果，只是没有在第一个输入焦点上显示

【解决方案2】：

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

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

【讨论】：