Угловой 6 с начальной загрузкой 4 - форма проверки электронной почты

Question

У меня есть форма для отправки электронной почты, я хочу добавить проверку, чтобы ее нельзя было empyt (requured), не было недействительным адресом электронной почты, например, juventusSignedCr7@4.4, и т. Д., Но когда я добавляю электронную почту, например, neymarPleaseStopeDiving, к своему входу и нажимаю отправить сообщение об ошибке не возвращается и данные отправляются, только когда я отправляю пустой ввод, я получаю сообщение об ошибке. требуется электронная почта

Вот что я сделал:

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>

Вопрос

Что не так с моим кодом? пожалуйста, помогите новичку здесь, спасибо

Answer 1

Вы также можете использовать регулярное выражение для поля электронной почты, что-то вроде этого, во входном теге

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

таким образом вы вызываете функцию каждый раз, когда пользователь вводит текст внутри, а затем в своем файле Ts вы объявляете функцию, которую вы помещаете внутри тега ввода, в свой 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;
    }

  }

Только не забудьте объявить переменную validEmail в верхней части вашего файла

validEmail:boolean = false

константа validEmail - это место, где вы объявляете выражение regex, то, которое я положил, действительно полезно для проверки электронной почты, метод test - это место, где вы сравниваете выражение со строкой, метод возвращает true or false После этого в вашем html-теге кнопки происходит что-то вроде этого.

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

Мне нравится этот способ, потому что я могу иметь полный контроль над тем, что я хочу в каждом входном теге

Answer 2

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*$" убедится, что есть @ и a. сопровождается строкой.

Answer 3

Я вижу, что вы используете 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]],
    });
  }
}

получил пример от здесь