Проверка угловых форм не запускается для поля автора

Question

проверка угловой формы, если условие не связывается для поля автора.

угловое 7

HTML:

<div class="form-group"> 
  <label class="col-md-4">Author Name </label>
  <input type="text"  class="form-control" formControlName="author" #author /></div>
<div *ngIf="author.invalid && (author.dirty || author.touched)" class="alert alert-danger">
  <div *ngIf="author.errors.required">
     Author is required.
  </div>
</div>

TS:

import { FormControl, FormGroup,  FormBuilder,  Validators } from '@angular/forms';
bookForm = new FormGroup({author: new FormControl('', Validators.required)});

get author() {
  return this.bookForm.get('author');
}

Answer 1

Удалите #author из входного HTML-элемента, потому что его Template Variables не имеют таких свойств, как invalid, touched и т. Д.

Переменные шаблона:

Ссылочная переменная шаблона часто является ссылкой на элемент DOM внутри шаблона. Это также может быть ссылка на угловой компонент или директиву или веб-компонент.

Используйте символ хеша (#) для объявления ссылочной переменной. #Phone объявляет телефонную переменную для элемента.

Updated_Stackblitz

Answer 2

Если FormControl допустимо, поле errors возвращает undefined.Поэтому вы можете использовать только *ngIf="author.errors".если вы хотите показать ошибку, когда она грязная и недействительная, вы можете использовать это:

<div *ngIf="author.dirty && author.errors" class="alert alert-danger">
  <ng-container *ngIf="author.errors.required">
     Author is required.
  </ng-container>
</div>

Answer 3

Попробуйте это условие

 bookForm.get('author').touched && bookForm.get('author').invalid && 
 bookForm.get('author').errors.required