Проверка ввода углового материала не работает должным образом

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

Хорошо, я сделал что-то подобное, и это сработало :( <div *ngFor="let error of errors_by_field['network']"><mat-error *ngIf="error">{{error.message}}</mat-error></div>

Я знаю, что материал использует ErrorStateMatcher, но в моем случае это не работает с проверкой на стороне сервера

Answer 2

Попробуйте с (input)="validate($event)" вместо (keypress). Я думаю keypress выполняется только тогда, когда фокус переключается на другой элемент.

Если это не реактивная форма, вы также можете использовать (ngModelChange).