Angular “作者”字段的角度表单验证未被激发

如果“作者”字段的条件未绑定，则进行角度表单验证

角度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>

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

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

试试这个条件

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

试试这个条件

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

从输入HTML元素中删除

#author

，因为它没有任何属性，如

无效

，

触摸

等

模板变量：

模板引用变量通常是对模板中DOM元素的引用。它也可以是对角度组件、指令或web组件的引用

使用散列符号（#）来声明引用变量。#phone在元素上声明phone变量

从输入HTML元素中删除

#author

，因为它没有任何属性，如

无效

，

触摸

等

模板变量：

模板引用变量通常是对模板中DOM元素的引用。它也可以是对角度组件、指令或web组件的引用

使用散列符号（#）来声明引用变量。#phone在元素上声明phone变量

---

如果

表单控件

有效，

错误

字段返回

未定义

。因此，您只能使用

*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>

作者是必需的。

如果

表单控件

有效，

错误

字段返回

未定义

。因此，您只能使用

*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>

作者是必需的。

注册页


请输入
名字
请输入
姓氏
请输入电子邮件
价值
选择文件


登记

注册页


请输入
名字
请输入
姓氏
请输入电子邮件
价值
选择文件


登记