Почему мой валидатор formGroup работает так, как ожидалось?

Я пытаюсь выполнить проверки формы и запустить некоторые проблемы, если я использую валидатор angular, например:

<input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">

и поместите его в форму по формеGroup:

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >

    <input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">
        <div  class="emailinvalid" *ngIf="emailField.invalid && emailField.touched">
          <span  *ngIf="emailField.hasError('email')">
            Please enter the correct email, this email not valid.
          </span>
        </div>
          <br>
  </form>

таким образом, проверка электронной почты не работает, поэтому я ищу способ ее исправить, вот мой ts-код:

export class ContactComponent  {


    myForm: FormGroup;
    email: string;
    username: string;
    surname: string;
    message: string;

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'username':  ['', Validators.required],
      'surname': ['', Validators.required],
      'message': ['', Validators.required],

    });
  }
 }

username, surname и другие входы, которые я использую в моей форме (formGroup) выше, я просто отключил его, чтобы немного очистить код.

Ответ 1

У вас, похоже, странное сочетание шаблона и реактивной формы. Я предлагаю вам использовать реактивную форму и встроенный валидатор email и в то же время удалить любой ngModel.

constructor(private fb: FormBuilder) {
  this.myForm = fb.group({
    username:  ['', Validators.required],
    surname: ['', Validators.required],
    message: ['', Validators.required],
    email: ['', Validators.email]
  });
}

и тогда шаблон будет выглядеть примерно так:

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >  
  <input formControlName="username" >
  <!-- more fields here -->
  <input formControlName="email" >
  <span *ngIf="myForm.hasError('email', 'email') && myForm.get('email').touched">
    Please enter the correct email, this email not valid.
  </span>
</form>

DEMO (просто для того, чтобы четко показать валидатор, я удалил touched)

Ответ 2

У вас может быть файл validator.ts

const pureEmail = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/;

export const regexValidators = {
  phone: '[\+][0-9() ]{7,}$',
  email: pureEmail,
};

И используйте в своих компонентах, например:

this.myForm = fb.group({
   'username':  ['', Validators.required],
   'surname': ['', Validators.required],
   'message': ['', Validators.required],
   'email':   ['', [Validators.required,Validators.pattern(this.validators.email)]]    
});

Ответ 3

Validators.pattern (/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/)

Вышеприведенный шаблон отлично подходит для меня, поскольку Validators.email проверяет, пока мы не введем @ .post, чтобы он сделал поле действительным.