带有Bootstrap 4的Angular 6-表单验证电子邮件

Question

I have form to submit email , I want to add validation, so that can not be empyt(requred), can not be invalid email eg juventusSignedCr7@4.4, etc but when I add email eg neymarPleaseStopeDiving to my input and click submit no error is returned and data is submitted, only when I submit empty input i get the error message. email is required

Here is what i have done:

UPDATE

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

Question

What is wrong with my code? please help newbie here though , thanks

Answer 1

You also can use a regular expresion for the email field, something like this, in your input tag

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

like this you call a function each time a user type inside, then in your Ts file, you declare the function that you put inside your input tag in your html

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

  }

Just dont forget to declare the variable validEmail on the top of your file

validEmail:boolean = false

the constant validEmail is where you declare the regex expresion, the one that i put i really good for email validation,the method test is where you compare the expresion with the string, the method returns true or false After that in your html button tag goes something like this.

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

i like this way because i can have full control of what i want in each input tag

Answer 2

Angular 6 Provides input validators like email and required.

I generally don't want to allow me@home format and always expect a TLD (like .com, .net, .org, etc). In addition to angular email validator I add my regex pattern to make it work.

<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 will implement Angular's default email validator.

required will make this field as mandatory.

pattern="^\\S*[@]\\S*[.]\\S*$" will make sure that there is a @ and a . followed by a string.

Answer 3

I see you are using FormGroup, what i did and works for me is add a validation when i create the FormGroup in the controller

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

this validator is binded to the [formGroup]="angForm"

You can also create a custom validator

    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>
      }
    }
   **/

and import the validator in your controller

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]],
    });
  }
}

got the example from here