Показать ошибки проверки формы при отправке в форме углового шаблона

Question

Я создал шаблонно-управляемую форму в Angular.

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched" class="validation-message">Required</div>
<button type="submit">Post</button>

Это показывает ошибку, когда она недействительна и прикоснулась.Мне нужно отобразить ошибку при отправке формы, т.е. когда нажата кнопка отправки.

onSubmit({value, valid}): void {
    if (valid) {
      console.log(value);
    } else {
      console.log('invalid form');
    }
  }

Answer 1

Для этого нужно использовать дополнительный флаг.

Как показано ниже,

submitted = false;
onSubmit() { this.submitted = true; }

И вставить submitted в *ngIf оператор.

Ссылка: https://angular.io/guide/forms#toggle-two-form-regions-extra-credit

Answer 2

Чтобы добавить к ответам: ngForm имеет выставленный флаг.Итак, просто создайте переменную шаблона и выполните ngIf для ошибок (т. Е. NgForm.submitted === true)

Answer 3

Установите флаг в true, когда он действителен, и используйте $ ngIf: HTML

<form #myForm="ngForm" (submit)="onSubmit(myForm)">
        <input type="text" class="form-control" required [(ngModel)]="fullname"          name="fullname" #input="ngModel">
        <div style="color:red" *ngIf="submittedError">
                Error
        </div>
        <br><br>
    <button type="submit">Post</button>
</form>

Машинопись:

submittedError;
...  
onSubmit({value, valid}): void {
    if (valid) {
     this.submittedError=false;
      console.log(value);
    } else {
     this.submittedError=true;
      console.log('invalid form');
    }
  }
}

демо