angular - Angular 6中的电子邮件验证?
问题描述
我有一个带有电子邮件表单字段的 angular6 表单。
电子邮件表单字段具有电子邮件验证,可在电子邮件无效时正确显示错误消息。但是,如果我单击“保存”按钮,表格仍会保存。如何显示错误消息,但单击时不保存用户?
重要的要求是我不想禁用“保存”按钮。
user.component.html
<form method="post" enctype="multipart/form-data">
<mat-form-field>
<input matInput placeholder="Enter your Username" [(ngModel)]="userObj.userName" name="username" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Enter your email" [formControl]="email" [(ngModel)]="userObj.emailid" name="emailid" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</form>
<button mat-raised-button color="primary" (click)="saveNewUserDetails()">Save User</button>
用户.component.ts
import {FormControl, Validators} from '@angular/forms';
email = new FormControl('', [Validators.required, Validators.email]);
getErrorMessage() {
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' : '';
}
saveNewUserDetails(){
if(this.userObj.userName.trim() != ''){
const formData = new FormData();
formData.append('username',this.userObj.userName);
formData.append('emailid',this.userObj.emailid);
this.userService.saveNewUserDetails(formData).subscribe(
(data) => {
console.log("user is saved successfully");
}
)
}
}
解决方案
在saveNewUserDetails()
方法中,这样做:
saveNewUserDetails() {
if (this.email.invalid) {
// Do Not submit
} else {
// Submit
}
}
或者
我仍然建议添加[disabled]="email.invalid"
到您的按钮:
<button
mat-raised-button
[disabled]="email.invalid"
color="primary"
(click)="saveNewUserDetails()">
Save User
</button>
推荐阅读
- python - Unable to send more than 8 bytes of data over pyserial
- c# - How can get the size of an object and add boxcollider that will cover automatic the object?
- python - FastAPI 处理和重定向 404
- python - 如何找到不同的字符?
- ruby-on-rails - RSpec proper way to check created column
- github - electron.exe 和 Github
- c# - 使用 .Local 和 new 构造函数有效地删除 EF 实体而不检索查询
- python - 如何使代码在 text.split 之后不打印两次单词
- swift - 获取包含在字符串和数组中的短语列表
- python - 将scrapy json导出读入python