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)"而不是(keypress)。我认为keypress仅在焦点切换到另一个元素上时执行。

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

Answer 2

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

我知道资料使用ErrorStateMatcher，但在我的情况下无法与服务器端验证一起使用

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

2 个答案: