Question

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

输入字段包含电子邮件类型。例如：

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

我想验证此字段。但它不应该是必填字段。验证应该只在没有空的情况下开始。如果该字段为空，则可以使用。否则，在电子邮件地址正确之前，应显示错误消息。

这不是真正的工作：

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

那么，我该如何验证电子邮件字段？我想念的状态是＆＃34;不是空的＆＃34;。

任何提示？

Answer 1

将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 ="aler alert-danger">
           <div [hidden]="!emailref.errors?.pattern">
             Invalid pattern
           </div> 
          </div> 
    </div>

Answer 2

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

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

Answer 3

在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文件中添加这两个简单的类

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

Answer 4

我正在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 5

我尝试了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 6

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

<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 7

对于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>

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 内置的电子邮件验证器，即使它可能没有最好的 RegEx（像 abc@abc 这样的东西会通过验证，但这是前端，所以也许你不想招致太多脑损伤“解决”这个），你需要在你的 HTML 模板中添加 from os.path import isfile from sqlite3 import connect from apscheduler.triggers.cron import CronTrigger DB_PATH = "./data/db/database.db" BUILD_PATH = "./data/db/build.sql" cxn = connect(DB_PATH, check_same_thread=False) cur = cxn.cursor() def with_commit(func): def inner(*args, **kwargs): func(*args, **kwargs) commit() return inner @with_commit def build(): if isfile(BUILD_PATH): scriptexec(BUILD_PATH) def commit(): cxn.commit() def autosave(sched): sched.add_job(commit, CronTrigger(second=0)) def close(): cxn.close() def field(command, *values): cur.execute(command, tuple(values)) if (fetch := cur.fetchone()) is not None: return fetch[0] def record(command, *values): cur.execute(command, tuple(values)) return cur.fetchone() def records(command, *values): cur.execute(command, tuple(values)) return cur.fetchall() def column(command, *values): cur.execute(command, tuple(values)) return [item[0] for item in cur.fetchall()] def execute(command, *values): cur.execute(command, tuple(values)) def multiexec(command, valueset): cur.executemany(command, valueset) def scriptexec(path): with open(path, "r", encoding="utf-8") as script: cur.executescript(script.read())（在你的 component.ts 中没有），像这样：

[email]="true"

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

Angular 5 - 表单验证电子邮件

11 个答案: