Angular 5 - 表单验证电子邮件

Posted 2023-02-22

【中文标题】Angular 5 - 表单验证电子邮件

【英文标题】：Angular 5 - form validation e-mail

【发布时间】：2018-08-17 09:10:14

【问题描述】：

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

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

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

我想验证这个字段。但它不应该是必填字段。 如果它不为空，则验证应该只开始。 如果该字段为空，则一切正常。否则应显示错误消息，直到电子邮件地址正确为止。

这不是真的工作：

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

那么，我如何验证电子邮件字段？ 我想念“非空”之类的状态。

有什么提示吗？

【问题讨论】：

看看***.com/questions/25025102/…

谢谢。我有另一个例子：我用一些字母填充输入字段并再次删除它。 Dirty 为 true，Touched 为 true，valid 为 false。但实际上everythink都很好，因为输入字段是空的。

您可以使用 Angular 内置电子邮件验证器。请点击此链接here

【参考方案1】：

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

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

【参考方案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>

【参考方案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-.]+$')
    ]))
);

【讨论】：

很好，这么短......事情是 Validators.email 让通过 email@email （whitout '.com' 左右）

【参考方案4】：

我在 Angular 7 中尝试过

下面的html代码对我有用

<input type="email" class="form-control center-ele"
    [(ngModel)]="recruiter_mail" id="rmail"
    name="recriter_mail"
    pattern="[e-mail]" 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>

【讨论】：

从您的回答中，我可以检查电子邮件中 ​​.com 的验证，是否可以同时添加 .com 和 .in？如果是这样，请帮助我

【参考方案5】：

Vikas 给出了一个很好的答案！立即在程序中工作， 但是，如果您在表单中键入/处理其他字段（尽管仍然有效），控制台会给出错误，所以我将 #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相同。

【参考方案6】：

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

在组件类变量中

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

【讨论】：

当这个方法在Angular 6 中可用时，你为什么说Angular 8？ v6.angular.io/api/forms/Validators

我在8 版本中使用过，所以我提到了它。

我发现第 8 版演示很有用。

这不会捕获email@email等情况

如果你要使用内置的，不妨在 HTML 中做，而不涉及到 component.ts。 <input type="email" name="email" #email="ngModel" [email]="true">下面看我的回答***.com/a/67488478/5648143

【参考方案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;
`

【参考方案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>

【参考方案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;
  

【参考方案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>
        

【参考方案11】：

如果你想使用 Angular 的内置电子邮件验证器，即使它可能没有最好的 RegEx（类似 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" 让它看起来很正式，不太可能被错过！