没有为作者字段触发角度表单验证答案

【问题标题】：Angular form validation not getting fired for author field没有为作者字段触发角度表单验证
【发布时间】：2019-04-16 06:43:09
【问题描述】：

如果没有为作者字段绑定条件，则进行角度表单验证。

角度 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');
}

【问题讨论】：

标签： angular forms validation

【解决方案1】：

从输入 HTML 元素中删除 #author，因为它的 Template Variables 没有任何属性，如 invalid、touched 等。

模板变量：

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

使用井号 (#) 来声明引用变量。 #phone 在元素上声明一个 phone 变量。

Updated_Stackblitz

【讨论】：

【解决方案2】：

试试这个条件

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

【讨论】：

【解决方案3】：

如果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>

【讨论】：

【解决方案4】：

     <form #form="ngForm" (ngSubmit)="onSubmit(form)" 
            [ngClass]="{'was-validated': form.invalid && (form.dirty || form.touched)}">
            <div class="" ngModelGroup="User">
                <h2 class="text-center">Registration page</h2>
                <br />                 
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="First Name" name="firstname" required
                        ngModel #firstname="ngModel">
                    <span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Please enter the
                        firstname</span>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Last Name" name="lastname" required ngModel
                        #lastname="ngModel">
                    <span class="help-bpx" *ngIf="lastname.touched && !lastname.valid ">Please enter the
                        lastname</span>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email" email
                        required ngModel #email="ngModel">
                    <span class="help-bpx" *ngIf="email.touched && !email.valid ">Please enter the Email
                        Value</span>
                </div>
                <div class="form-group">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="customFile" required ngModel name="file" #file="ngModel">
                        <label class="custom-file-label" for="customFile">Choose file</label>
                      </div>
                </div>
                
                <br />
                <div class="align-center">
                    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Register</button>
                </div>
            </div>
        </form>

【讨论】：