【问题标题】:Angular 5 - form validation e-mailAngular 5 - 表单验证电子邮件
【发布时间】:2018-08-17 09:10:14
【问题描述】:

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

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

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

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

这不是真的工作:

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

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

有什么提示吗?

【问题讨论】:

  • 谢谢。我有另一个例子:我用一些字母填充输入字段并再次删除它。
    Dirty 为 true,Touched 为 true,valid 为 false。但实际上everythink都很好,因为输入字段是空的。
  • 您可以使用 Angular 内置电子邮件验证器。请点击此链接here

标签: angular angular4-forms


【解决方案1】:

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

*ngIf="email.value !== '' &amp;&amp; email.untouched &amp;&amp; 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=".+@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>

      【讨论】:

      • 从您的回答中,我可以检查电子邮件中 ​​.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 8v6.angular.io/api/forms/Validators
        • 我在8 版本中使用过,所以我提到了它。
        • 我发现第 8 版演示很有用。
        • 这不会捕获email@email等情况
        • 如果你要使用内置的,不妨在 HTML 中做,而不涉及到 component.ts。 &lt;input type="email" name="email" #email="ngModel" [email]="true"&gt;下面看我的回答stackoverflow.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" 让它看起来很正式,不太可能被错过!

                【讨论】:

                  猜你喜欢
                  • 2019-03-08
                  • 2021-08-18
                  • 1970-01-01
                  • 2022-08-13
                  • 1970-01-01
                  • 2011-05-27
                  • 2013-09-08
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多