驗證不適用於 angular 反應式 forms
[英]Validation not working on angular reactive forms
問題描述
我有一個簡單的反應形式，我從https://medium.com/@jinalshah999/reactive-forms-in-angular-a46af57c5f36中獲取了指南，以制作反應形式以在 angular 9 中進行驗證。
我不知道我在stackbliz上發布過，但我得到了三個鏈接：
APP URL https://angular.stackblitz.io
嵌入 URL 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>
我的驗證不起作用。為什么會這樣？
1 個解決方案
解決方案1
2 已采納 2020-06-26 17:32:43
它確實按順序工作：當且僅當字段有錯誤“必需”並且該字段不是原始的（即臟）時，才會顯示錯誤消息：
<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>
Angular Reactive Forms 中需要重疊的電子郵件驗證
[英]Email Validation with required overlaps in Angular Reactive Forms
Angular 反應式 Forms - 驗證錯誤 - 無法讀取未定義或 null 的屬性
[英]Angular Reactive Forms - Validation Errors - Cannot read property of undefined or null
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
按鈕驗證-Angular 2反應形式
Angular Reactive Forms 中需要重疊的電子郵件驗證
Angular Reactive Forms 驗證的奇怪錯誤
使用反應形式的角度密碼和確認密碼驗證
向 Angular 反應式 Forms 添加確認密碼驗證？
Angular 4 - Reactive Forms啟用/禁用不工作
Angular 6反應形式驗證不適用於自定義驗證器
angular 6 :- 反應式表單驗證不起作用
如何在 angular 上向反應性 forms 添加特定驗證
Angular 反應式 Forms - 驗證錯誤 - 無法讀取未定義或 null 的屬性
相關標簽