我有一个简单的反应式，我从https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36那里得到了指导，制作了反应式，以便在角度9中进行验证。
我不知道我在stackbliz中发布了内容，但是我得到了三个链接： 编辑者网址 https://stackblitz.com/edit/angular
APP网址 https://angular.stackblitz.io
嵌入式网址 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>
我的验证无效，为什么？
答案 0 :(得分：2)
它确实按顺序工作：仅当字段具有“必需”错误时才显示错误消息。并且该字段不是原始的（即脏的）：
<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>