带有引导程序 4 的 Angular 6 - 表单验证电子邮件

Question

我有提交电子邮件的表单，我想添加验证，因此不能是空的（必需），不能是无效的电子邮件，例如 juventusSignedCr7@4.4, 等，但是当我添加电子邮件时，例如 neymarPleaseStopeDiving 到我的输入并单击提交不返回错误并提交数据，只有当我提交空输入时，我才会收到错误消息。电子邮件是必需的

这是我所做的：

更新

组件.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
...............
export class AboutComponent implements OnInit {
  angForm: FormGroup;
constructor(private flashMessages: FlashMessagesService,
    private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      email: ['', Validators.required]
    });
  }

HTML

    <form [formGroup]="angForm" novalidate class="form-element">
   <div class="form-group form-element_email">
              <input type="email" class="form-control" name="email" formControlName="email" #email />
            </div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
                class="alert alert-danger">
                <div *ngIf="angForm.controls['email'].errors.required">
                  Email is required.
                </div>

          <div class="form-group">
              <button (click)="addReview(email.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary form-element_btn">Book</button>
            </div>
      </form>

问题

我的代码有什么问题？请在这里帮助新手，谢谢

Answer 1

我看到您正在使用 FormGroup，我所做并为我工作的是在控制器中创建 FormGroup 时添加验证

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

这个验证器绑定到[formGroup]="angForm"

您还可以创建自定义验证器

    import { AbstractControl } from '@angular/forms';

export function ValidateUrl(control: AbstractControl) {
  if (!control.value.startsWith('https') || !control.value.includes('.io')) {
    return { validUrl: true };
  }
  return null;
}

   /**
   a easy validator for an email could be something like this
    let a = "adas@sdfs.com"
    let b = a.split('@')
    if(b.length == 2){
      //ok
      let c = b[1].split('.')
      if(c.length >= 1){
        //ok
        //a have <something>@<something>.<something>
      }
    }
   **/

并在你的控制器中导入验证器

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidateUrl } from './validators/url.validator';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      userName: ['', Validators.required],
      websiteUrl: ['', [Validators.required, ValidateUrl]],
    });
  }
}

从here得到示例

Answer 2

您也可以在您的输入标签中为电子邮件字段使用正则表达式，就像这样

<input type="email" class="form-control info" placeholder="Email" formControlName="email" (ngModelChange)="onChange($event)">

这样你每次用户在里面输入时调用一个函数，然后在你的 Ts 文件中，你声明你放在输入标签中的函数

onChange(newValue) {
    const validEmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (validEmailRegEx.test(newValue)) {
        this.validEmail = true;
    }else {
      this.validEmail = false;
    }

  }

别忘了在文件顶部声明变量validEmail

validEmail:boolean = false

常量validEmail 是你声明正则表达式的地方，我把它放在我非常适合电子邮件验证的地方，方法test 是你将表达式与字符串进行比较的地方，该方法返回true or false 之后，在您的 html 按钮标签中会出现类似这样的内容。

<button type="submit" class="btn btn-primary btn-block logBtn" [disabled]="!validEmail">ACCEDER</button>

我喜欢这种方式，因为我可以完全控制每个输入标签中我想要的内容

Answer 3

Angular 6 提供输入验证器，如电子邮件和必需。

我通常不希望允许me@home 格式，并且总是希望使用 TLD（如 .com、.net、.org 等）。 除了角度 email 验证器之外，我还添加了我的正​​则表达式 pattern 以使其工作。

<input type="email" name="email" #emailField="ngModel" pattern="^\S*[@]\S*[.]\S*$" email required />

<div class="help-block m-1" *ngIf="!emailField.valid && (emailField.touched || emailField.dirty)">
  <small>Invalid Email</small>
</div>

email 将实现 Angular 的默认电子邮件验证器。

required 会将此字段设为必填。

pattern="^\S*[@]\S*[.]\S*$" 将确保有一个 @ 和一个 .后跟一个字符串。