验证不适用于角度反应形式答案

【问题标题】：Validation not working on angular reactive forms验证不适用于角度反应形式
【发布时间】：2020-10-17 07:42:27
【问题描述】：

我有一个简单的反应式表单，我从https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36 获取指南以制作反应式表单以在 Angular 9 中进行验证。

我不知道我在 stackbliz 中发布过，但我得到了三个链接：编辑网址 https://stackblitz.com/edit/angular

嵌入网址 https://stackblitz.com/edit/angular?embed=1&file=src/app/app.component.html

如果它不起作用，请告诉我在哪里可以获得真正的链接。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule , ReactiveFormsModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder,Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

checkoutFormGroup: FormGroup;

  name = 'Angular';
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {

    this.checkoutFormGroup = this.formBuilder.group({
      customer: this.formBuilder.group({
        firstName: ['',Validators.required],
        lastName: ['', Validators.required],
        email: ['', Validators.required]
      }),
      shippingAddress: this.formBuilder.group({
        street: [''],
        city: [''],
        state: [''],
        country: [''],
        zipcode: ['']
      }),
      billingAddress: this.formBuilder.group({
        street: [''],
        city: [''],
        state: [''],
        country: [''],
        zipcode: ['']
      }),
      creditCard: this.formBuilder.group({
        cardType: [''],
        nameOnCard: [''],
        cardNumber: [''],
        cvv: [''],
        expirationMonth: [''],
        expirationYear: ['']
      })
    })

    console.log(this.checkoutFormGroup);
  }

    onSubmit() {
    if (this.checkoutFormGroup.invalid) {
      return;
  }
    
  }
 
}

app.component.html

 <form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()">
                    
                    <!-- Customer info -->
                    <fieldset class="scheduler-border">
                        <legend class="scheduler-border"><h3>Cusomter</h3></legend>
                        <div formGroupName="customer">
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>First Name</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="firstName" class="form-control"/>
                                        <p  *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') && !checkoutFormGroup.get('customer').get('firstName').pristine">
                                           Firstname is required
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>Last Name</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="lastName" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>Email Name</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="email" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <!-- Shipping info -->
                    <fieldset class="scheduler-border">
                        <legend class="scheduler-border"><h3>Shipping Address</h3></legend>
                        <div formGroupName="shippingAddress">
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>Street</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="street" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>City</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="city" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-5 mb-3">
                                    <label>Country</label>
                                    <select formControlName="country" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>United States</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>State</label>
                                    <select formControlName="state" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>California</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label>Zip</label>
                                    <input formControlName="zipcode" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <br/>
                    <div class="form-check">
                        <input type="checkbox" (change)="copyShippingAddressToBillingAddress($event)" class="form-check-input">
                        <label>Shipping address is the same as my billing address</label>
                    </div>
                    <br/>
                    <!-- Billing info -->
                    <fieldset class="scheduler-border">
                        <legend class="scheduler-border"><h3>Billing Address</h3></legend>
                        <div formGroupName="billingAddress">
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>Street</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="street" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>City</label>
                                </div>
                                <div class="col-md-9">
                                    <div>
                                        <input type="text" formControlName="city" class="form-control"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-5 mb-3">
                                    <label>Country</label>
                                    <select formControlName="country" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>United States</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>State</label>
                                    <select formControlName="state" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>California</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label>Zip</label>
                                    <input formControlName="zipcode" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <!-- Credit card info -->
                    <fieldset class="scheduler-border">
                        <legend class="scheduler-border"><h3>Credit Card</h3></legend>
                        <div formGroupName="creditCard">
                            <div class="row form-group">
                                <div class="col-md-3">
                                    <label>Card Type</label>
                                </div>
                                <div class="col-md-9">
                                    <select formControlName="cardType" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>VISA</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-6 mb-3">
                                    <label for="cc-name">Name on card</label>
                                    <input type="text" formControlName="nameOnCard" class="form-control" />
                                    
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="cc-number">Credit card number</label>
                                    <input type="text" formControlName="cardNumber" class="form-control" />
                            
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-5 mb-3">
                                    <label>Expiration Month</label>
                                    <select formControlName="expirationMonth" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>United States</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label>Expiration Year</label>
                                    <select formControlName="expirationYear" class="custom-select d-block w-100">
                                        <option value="">Choose...</option>
                                        <option>California</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label>CVV</label>
                                    <input formControlName="cvv" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Purchase</button>
                    </div>
                </form>

我的验证不起作用。为什么会这样？

【问题讨论】：

怎么不工作了？
当输入为空并且我点击提交按钮时，我没有收到验证消息。

标签： javascript angular typescript angular9

【解决方案1】：

它确实按顺序工作：当且仅当该字段有错误“必需”时才会显示错误消息并且该字段不是原始的（即脏）：

<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') && !checkoutFormGroup.get('customer').get('firstName').pristine">
    Firstname is required
</p>

单击提交按钮不会使该控件变脏，因此错误消息没有理由出现。

如果您希望在单击提交后也显示消息，例如，您可以声明对表单元素的模板引用：

<form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()" #formGroupRef="ngForm">

并将条件更改为

<p *ngIf="checkoutFormGroup.get('customer').get('firstName').hasError('required') &&
    (checkoutFormGroup.get('customer').get('firstName').dirty || formGroupRef.submitted)">
        Firstname is required
</p>

【讨论】：