我有表单提交电子邮件,我想添加验证,所以不能empyt(需要),不能无效的电子邮件,如[email protected],
等,但当我添加电子邮件,如neymarPleaseStopeDiving
到我的输入,然后单击提交没有错误返回和数据提交,只有当我提交空输入时,我才会收到错误消息。需要电子邮件
这就是我所做的:
UPDATE
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
是你将expresion与字符串进行比较的方法,该方法返回true or false
之后你的html按钮标签就像这个。
<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 = "[email protected]"
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]],
});
}
}
从here得到了一个例子