javascript - 验证不适用于角度反应形式
问题描述
我有一个简单的反应形式，我从https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36获取指南，以制作反应形式以在 Angular 9 中进行验证。
我不知道我在 stackbliz 中发布过，但我得到了三个链接： EDITOR URL https://stackblitz.com/edit/angular
应用网址 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>
我的验证不起作用。为什么会这样？
解决方案
它确实按顺序工作：当且仅当该字段有错误“必需”并且该字段不是原始的（即脏）时才会显示错误消息：
<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>
推荐阅读
- java - MySQL：使用同一表中同一列的最大值插入新记录
- javascript - 完成承诺后如何获得价值
- node.js - 将字符串部分覆盖到引号中 Node.js
- javascript - 如何动态匹配对象值与玩笑
- vue.js - 我想在 VueJs 中制作一个类似收音机的复选框
- firebase - 设备上嵌入式客户端应用程序的身份验证
- json - Google API Places Detail : 不返回日本的地区名称
- javascript - 使用 jQuery 将日期输入值重新格式化为德语格式
- java - 了解 CopyOnWriteArrayList 迭代器行为
- php - 我想在 app.blade.php 中添加到 laravel 主菜单的路由