Угловая шаблонная форма при подтверждении отправки

Question

В угловых js мы отправили $ для заполнения сообщений об ошибках при щелчке при отправке.

Как отобразить все ошибки проверки при щелчке при отправке в Angular

HTML:

<form #nameForm="ngForm" novalidate (ngSubmit)="saveNameForm(formModel)">
<div class="form-group">
   <label for="inputName" class="form-control-label"> Name</label>
   <input type="text" id="inputName" name="lotCode [(ngModel)]="formModel.name" #lotCode="ngModel" aria-describedby="nameHelp"
     autocomplete="new-password" required>
   <small id="nameHelp" class="text-danger" *ngIf="lotCode.invalid && lotCode.touched">Required</small>
</div>

<div class="form-group">
    <label for="inputDescription" class="form-control-label"> Description</label>
    <input type="text" id="inputDescription" name="desCode" [(ngModel)]="formModel.description" #desCode="ngModel" aria-describedby="descriptionHelp"
     autocomplete="new-password" required>
    <small id="descriptionHelp" class="text-danger" *ngIf="desCode.invalid && desCode.touched">Required</small>
</div>

<button type="submit">Submit </button>
</form>

Компонент:

 export class AppComponent  {
 formModel: FormModel= new FormModel();
 saveNameForm(formModel){
 console.log(formModel)
 }
 }
 export class FormModel {
 name: string;
 description:string;
 }

https://stackblitz.com/edit/angular-rizsuy?file=src%2Fapp%2Fapp.component.ts

Answer 1

Вот решение: https://stackblitz.com/edit/angular-8jaaqz?file=src%2Fapp%2Fapp.component.html

Вы должны использовать переменную для установки отправленных если отправлено, то будет отображаться ошибка

Answer 2

Angular использует ту же проверку формы , что и нативный HTML5. Просто сделайте это в угловом контексте. В следующем примере мы можем использовать *ngIf для управления отображением сообщений, а .dirty и .touched для определения, взаимодействовал ли пользователь с вводом.

Пример из документов :

<input id="name" name="name" class="form-control"
  required minlength="4" appForbiddenName="bob"
  [(ngModel)]="hero.name" #name="ngModel" >

  <div *ngIf="name.invalid && (name.dirty || name.touched)"
  class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>
</div>