Как добавить пользовательскую ошибку в форму на основе шаблона после изменения модели двустороннего связывания?

Question

В моем приложении 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
        });
    }
  );
 }

Как добавить ошибку в форму, которая продолжает прикрепляться к форме после того, как она также изменила модель. Есть ли событие для прослушивания, которое запускается после обновления модели, которое я могу использовать для этого?

Answer 1

вы можете использовать что-то вроде этого:

<span *ngIf=" this.form.control.errors" class="someClassREDTEXT">Form has error</span>

вы проверяете, есть ли ошибка с this.form.control.error и показывает сообщение об ошибке