web-dev-qa-db-de.com

Warum funktioniert mein formGroup-Validator nicht wie erwartet?

Ich bin bestrebt, Formulierungen zu machen und auf ein Problem zu stoßen, wenn ich den eckigen E-Mail-Validator wie folgt verwende:

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

und von formGroup in Form bringen:

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

auf diese Weise funktioniert die E-Mail-Validierung nicht, also suche ich nach dem Weg, das Problem zu beheben. Hier ist mein ts-Code:

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 und andere Eingaben, die ich in meinem Formular (formGroup) oben verwende, habe ich gerade abgeschnitten, um den Code im Beispiel ein wenig zu bereinigen.

18
shoopik

Sie scheinen eine seltsame Mischung aus Vorlage und reaktiver Form zu haben. Ich schlage vor, Sie verwenden ein reaktives Formular und den eingebauten Validator email und entfernen gleichzeitig alle ngModel.

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

und die Vorlage würde dann ungefähr so ​​aussehen:

<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 (nur um den Validator eindeutig zu zeigen, habe ich die touched entfernt)

31
AJT_82

Sie können eine validator.ts-Datei haben

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

Und verwenden Sie in Ihren Komponenten wie:

this.myForm = fb.group({
   'username':  ['', Validators.required],
   'surname': ['', Validators.required],
   'message': ['', Validators.required],
   'email':   ['', [Validators.required,Validators.pattern(this.validators.email)]]    
});
5
Eduardo Vargas
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,}))$/)

Das obige Muster funktioniert gut für mich, da Validators.email gültig ist, bis wir einen @ .post eingeben, der das Feld als gültig erklärt.

1