[英]Angular 6 with bootstrap 4 - form validation e-mail
我有提交電子郵件的表單,我想添加驗證,因此不能為empyt(requred),不能為無效的電子郵件,例如juventusSignedCr7@4.4,
等等,但是當我向我的輸入中添加電子郵件例如neymarPleaseStopeDiving
並單擊提交時,沒有錯誤返回並提交數據,僅當我提交空輸入時,我才收到錯誤消息。 電子郵件為必填項
這是我所做的:
更新
component.ts
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
...............
export class AboutComponent implements OnInit {
angForm: FormGroup;
constructor(private flashMessages: FlashMessagesService,
private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.angForm = this.fb.group({
email: ['', Validators.required]
});
}
的HTML
<form [formGroup]="angForm" novalidate class="form-element">
<div class="form-group form-element_email">
<input type="email" class="form-control" name="email" formControlName="email" #email />
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
<div class="form-group">
<button (click)="addReview(email.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary form-element_btn">Book</button>
</div>
</form>
題
我的代碼有什么問題? 請幫助新手,謝謝
您還可以在輸入代碼中對電子郵件字段使用常規表達式,如下所示
<input type="email" class="form-control info" placeholder="Email" formControlName="email" (ngModelChange)="onChange($event)">
像這樣,您每次在用戶輸入內容時都調用一個函數,然后在Ts文件中,將您聲明的函數放在html的輸入標記中
onChange(newValue) {
const validEmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (validEmailRegEx.test(newValue)) {
this.validEmail = true;
}else {
this.validEmail = false;
}
}
只是不要忘記在文件頂部聲明變量validEmail
validEmail:boolean = false
常量validEmail
是您聲明正則表達式表達的地方,我所說的對電子郵件驗證非常有用,方法test
是您將表達與字符串進行比較,該方法返回true or false
之后在html button標記中這樣的事情。
<button type="submit" class="btn btn-primary btn-block logBtn" [disabled]="!validEmail">ACCEDER</button>
我喜歡這種方式,因為我可以完全控制每個輸入標簽中的內容
Angular 6提供輸入驗證程序,例如電子郵件和必填。
我通常不希望使用me@home
格式,並且總是希望使用TLD(例如.com,.net,.org等)。 除了有角度的email
驗證程序外,我還添加了正則表達式pattern
以使其正常工作。
<input type="email" name="email" #emailField="ngModel" pattern="^\S*[@]\S*[.]\S*$" email required />
<div class="help-block m-1" *ngIf="!emailField.valid && (emailField.touched || emailField.dirty)">
<small>Invalid Email</small>
</div>
email
將實現Angular的默認電子郵件驗證器。
required
將使此字段為必填字段。
pattern="^\\S*[@]\\S*[.]\\S*$"
將確保有一個@和一個。 然后是一個字符串。
我看到您正在使用FormGroup,我所做的和對我有用的工作是在控制器中創建FormGroup時添加一個驗證
FormGroup({
email: new FormControl('', [Validators.required, Validators.email])
})
此驗證器綁定到[formGroup]="angForm"
您還可以創建自定義驗證器
import { AbstractControl } from '@angular/forms';
export function ValidateUrl(control: AbstractControl) {
if (!control.value.startsWith('https') || !control.value.includes('.io')) {
return { validUrl: true };
}
return null;
}
/**
a easy validator for an email could be something like this
let a = "adas@sdfs.com"
let b = a.split('@')
if(b.length == 2){
//ok
let c = b[1].split('.')
if(c.length >= 1){
//ok
//a have <something>@<something>.<something>
}
}
**/
並將驗證器導入控制器
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidateUrl } from './validators/url.validator';
@Component({
// ...
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
userName: ['', Validators.required],
websiteUrl: ['', [Validators.required, ValidateUrl]],
});
}
}
從這里得到了例子
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.