angular - Angular - 电子邮件验证不起作用
问题描述
我正在使用 Angular-7 开发应用程序。我向 ts 添加了一个电子邮件验证器并从 HTML 调用它
客户报价登陆.ts
import { Component, OnInit, Inject, LOCALE_ID, TemplateRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ClientQuoteService } from '../../../../shared/services/client-quote.service';
import { first } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
import { formatDate } from '@angular/common';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-client-quote-landing',
templateUrl: './client-quote-landing.component.html',
styleUrls: ['./client-quote-landing.component.scss']
})
export class ClientQuoteLandingComponent implements OnInit {
quoteModel: any = {};
formattedAddress = '';
constructor(
private clientQuoteService: ClientQuoteService, private toastr: ToastrService,
private router: Router,
@Inject(LOCALE_ID) private locale: string,
private route: ActivatedRoute
) {
}
ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
// document.body.className = 'skin-blue sidebar-mini';
}
onCreateQuote(quoteform: any) {
if (!quoteform.valid) { // return false if form not valid
return false;
}
this.clientQuoteService.createClientQuote(this.quoteModel)
.pipe(first())
.subscribe(
response => {
if (!response['success']) {
this.toastr.error(response['message']);
return false;
}
this.toastr.success(response['message']);
quoteform.reset();
quoteform.resetForm();
this.router.navigate(['landing']);
},
error => {
this.toastr.error(error);
}
);
}
emailOnly(event): boolean {
const charCode = '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$';
return true;
}
}
客户报价-landing.html
<div class="col-xs-6">
<label for="email">Email</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-envelope"></i>
</div>
<input type="text"
(keypress)="emailOnly($event)"
class="form-control"
id="email"
placeholder="Email"
name="email"
[(ngModel)]="quoteModel.email"
#email="ngModel"
[ngClass]="{'is-invalid' : email.invalid && ((email.dirty || email.touched) || quoteform.submitted)}"
required minlength="10">
</div>
<div
class="form-feedback"
*ngIf="email.invalid && ((email.dirty || email.touched) || quoteform.submitted)"
class="invalid-feedback">
<div style="color:red;"
*ngIf="email.errors?.required"
class="alert alert-danger">
Email is required.
</div>
<div style="color:red;"
*ngIf="email.errors?.email">
Email must be a valid email address
</div>
</div>
</div>
当我输入错误的电子邮件时,只要光标离开文本输入,就会显示以下错误消息:
电子邮件必须是有效的电子邮件地址
但什么都没有显示。
解决方案
该函数本身只返回真或,但它不告诉验证是否正确。在模板驱动的表单中,需要通过 html 属性“模式”进行验证。
<div class="form-group">
<label for="uname1">Email</label>
<input
type="email"
[(ngModel)]="registerUserData.email"
#email="ngModel"
name="email"
pattern="[^ @]*@[^ @]*.[^ .]"
class="form-control rounded-0"
required
[ngClass]="{
'is-invalid': email.invalid && ( email.dirty || email.touched ),
'is-valid': email.valid && ( email.dirty || email.touched )
}">
<div class="invalid-feedback" *ngIf="email.invalid && email.touched">
<p *ngIf="email.errors.pattern || email.touched ">Email required must contaion a @ and .(dot)</p>
</div>
</div>
推荐阅读
- python - 握手失败;返回 -1,ssl 错误代码 1,net_error -202
- batch-file - Ping 测试并保存到所需的文本文件 仅输出
- javascript - 获取带有视图子元素的元素列表
- tensorflow - tensorflow-2.0.0-cp36-cp36m-win_amd64.whl 不是此平台支持的轮子
- python - 如何通过一个循环创建多个列表?
- javascript - 没有 $index 的 AngularJs 动态编号
- angular - 在 d3 中获取数据的问题
- json - 如何在 ReasonML 中解码 GeoJson?
- java - Eclipse IDE 支持 Java 14 早期访问版本
- python - 我想将 Python 转换为导入 tensorflow 的 exe