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