Angular 5 - 表单验证电子邮件

Question

我想解决这个问题： Angular 5 - 模板驱动表单

输入字段的类型为电子邮件。示例：

<input type="email" [(ngModel)]="model.email" #email="ngModel" email />

我想验证这个字段。但它不应该是必填字段。如果它不为空，则验证应该只开始。如果该字段为空，则一切都很好。否则，在电子邮件地址正确之前，将显示一条错误消息。

这不是真正有效的：

*ngIf="email.untouched && email.invalid"

那么，我该如何验证电子邮件字段？我想念 "not empty" 这样的状态。

有什么提示吗？

Answer 1

您可以简单地将附加条件传递到 ngIf 指令中，以检查输入的当前值是否为空字符串。

*ngIf="email.value !== '' && email.untouched && email.invalid"

Answer 2

使用 pattern 属性和正则表达式进行电子邮件验证。

 <div class="form-group">
        <label for ="email">Email</label>
          <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email"name="email" ngModel #emailref="ngModel">
          <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class ="alert alert-danger">
           <div [hidden]="!emailref.errors?.pattern">
             Invalid pattern
           </div> 
          </div> 
    </div>

Answer 3

我在 Angular 6+ 中使用它，它对我有用。

在 TypeScript 文件中使用以下模式。

this.validations_form = this.formBuilder.group({
    email: new FormControl('', Validators.compose([
           Validators.required,
           Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
    ]))
});

Answer 4

我试过 angular 7

下面 html 中的代码适合我

<input type="email" class="form-control center-ele"
    [(ngModel)]="recruiter_mail" id="rmail"
    name="recriter_mail"
    pattern=".+@globex.com" size="30"
    #email="ngModel"
    [ngClass]="{ 'is-invalid': f.submitted && email.invalid }"
    required email
/>

<div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
    <div *ngIf="email.errors.required">Email is required</div>
    <div *ngIf="email.errors.email">Email must be a valid email address</div>
</div>

Answer 5

维卡斯给出了很好的答案！立即在程序中工作，但是如果您在表单中键入/处理其他字段（尽管仍在工作），控制台会出错，所以我将#variable emailref 更改为电子邮件，如下所示：

<div class="form-group">
  <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" 
         id="email" name="email" ngModel #email="ngModel" placeholder="Email">
  <div *ngIf="email.errors &&(email.touched || email.dirty)" class="aler alert-danger">
    <div [hidden]="!email.errors?.pattern">
      Invalid pattern
    </div>
  </div>
</div>

因此字段属性 name="email" 将与模板变量 #email 相同。

Answer 6

对于 Angular 8 个版本 有内置的电子邮件验证器可用。

在组件class变量中

email= new FormControl('',[
    Validators.required,
    Validators.email
  ]);

组件中html

 <input type="email" [formControl]="email" class="form-control" id="email" required>
                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
                    class="alert alert-danger">
                        <div *ngIf="email.errors.required">
                            Email is required.
                        </div>  
                        <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>                                               
                    </div> 
                       <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>   //this is not work
                       <div *ngIf="email.errors.validateEmail">
                            Please enter valid email
                        </div > //use this

Answer 7

在 Angular 8:

<div class="form-group">
        <label for="email">Email</label>
        <input type="email" required id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
         ngModel #emailref="ngModel" class="form-control" [class.success]="!emailref.invalid">
         <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class ="text-error">
              Invalid email
           </div>
       </div>

在您的 css 文件中添加这 2 个简单的类

`.success{
border: 1px solid greenyellow;
}
.text-error{
    color: red;
}`

Answer 8

在 xyz.component.html 文件中执行以下操作。此代码将记住有效的电子邮件和所需的电子邮件验证。

<mat-form-field>
         <input matInput #email="ngModel" type="email" [(ngModel)]="data.email" name="data_email" placeholder="Email" [class.is-invalid]="email.invalid && email.touched" required
                pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
         <mat-error *ngIf="email.errors && (email.invalid || email.touched) && email.errors.pattern">Please enter a valid email address.</mat-error>
         <mat-error *ngIf="email.errors && (email.invalid || email.touched) && email.errors.required">Email is required.</mat-error>
</mat-form-field>

Answer 9

我认为 angular(6+) 的更好答案是 Ajay Gupta 的答案。因为 Validators.email 喜欢 Krishnadas 的回答让我们通过 email@email 这样的事情。但我搜索了更好的模式，并在 this 答案中找到了一个更好的模式，并进行了解释。

如果您使用 prettier 或格式化您的代码的东西（并且总是更好），您的正则表达式模式最好在 / / 个字符之间所以：

this.form = this.formBuilder.group({
email: ['', [
       Validators.required,
       Validators.pattern(/^[\w]{1,}[\w.+-]{0,}@[\w-]{1,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$/)
       ]]
});

您可以像这样捕获错误：

<div *ngIf="(email.invalid && email.touched) || email.dirty">
    <small *ngIf="email.errors?.required" class="text-danger">email is required</small>
    <small *ngIf="email.errors?.pattern" class="text-danger">Please provide a valid email address</small>
</div>

您可以创建自己的验证器来扩展 Validators，以创建您自己的电子邮件验证器：

export class CommonValidators extends Validators {
  static email(control: FormControl): ValidationErrors | null {
    const value: string = control.value;
    if (_.isEmpty(value)) {
      return null;
    }

    const pattern = /^[\w]{1,}[\w.+-]{0,}@[\w-]{1,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$/;

    if (!value.match(pattern)) {
      return { email: true };
    }

    return null;
  }
}

Answer 10

我有一个场景，我想在输入的电子邮件生效后立即启用按钮并在 Angular 7 中更改其颜色：

import { fromEvent } from 'rxjs';
  
@ViewChild("emailInput") private emailInputRef: ElementRef;
isValidEmail = false; 
  
ngAfterViewInit(): void {
  fromEvent(this.emailInputRef.nativeElement, 'keyup')
  .subscribe(() => {
      var re = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$");
      this.isValidEmail = re.test(this.emailInputRef.nativeElement.value);
  }); 
}

<mat-form-field style="width: 100%"> 
 <input #emailInput matInput placeholder="Email address*" type="email" autocomplete="offhack" style="width: 100%">
</mat-form-field>
<button [color]="isValidEmail ? 'accent' : ''" [disabled]="!isValidEmail" style="width: 100%" mat-flat-button>Send Verification Email</button>

Answer 11

如果你想使用 Angular 的内置电子邮件验证器，即使它可能没有最好的正则表达式（像 abc@abc 这样的东西会通过验证，但这是前端所以也许你不想在“解决”这个问题时招致太多的脑损伤），你需要在你的 HTML 模板中添加 [email]="true"（你的 component.ts 中什么也没有），像这样：

<input type="email" name="email" #email="ngModel" [email]="true" [(ngModel)]="email_var">

然后，您可以使用 *ngIf="email.errors?.email" 来检查其有效性。根据 Angular 文档，您可以简单地写 email="true" 甚至只是 email，但是 [email]="true" 使它看起来正式并且不太可能被遗漏！

Answer 12

去年我一直在努力寻找一个很好的解释如何验证从输入中插入的用户电子邮件？因为我发现了 angular 的验证器，非常简单，没有模式，没有奇怪的东西只是添加 Validators.email。例如：

email: new FormControl('', [Validators.required, Validators.email]),

它将为您完成所有控制:)

Angular 5 - 表单验证电子邮件

Angular 5 - form validation e-mail

angular

angular4-forms