How to display error message basiert auf benutzerdefinierte Validierungsregeln im Winkel 2?
Ich bin mit einem template-driven Ansatz für die Erstellung von Formularen im Winkel 2, und ich habe erfolgreich erstellt benutzerdefinierte Validatoren, die ich verwenden kann in der Vorlage.
Aber ich kann nicht einen Weg finden, anzeigen von bestimmten Fehlermeldung gebunden zu bestimmten Fehlern. Ich will differenzieren, warum die form ist nicht gültig. Wie kann ich erreichen, dass?
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Site } from './../site';
import { BackendService } from './../backend.service';
import { email } from './../validators';
import { CustomValidators } from './../validators';
@Component({
templateUrl: 'app/templates/form.component.html',
styleUrls: ['app/css/form.css'],
directives: [CustomValidators.Email, CustomValidators.Url, CustomValidators.Goof],
providers: [BackendService]
})
export class FormComponent {
active = true;
submitted = false;
model = new Site();
onSubmit() {
this.submitted = true;
console.log(this.model);
}
resetForm() {
this.model = new Site();
this.submitted = false;
this.active = false;
setTimeout(() => this.active = true, 0);
}
get diagnostics() {
return JSON.stringify(this.model)
}
}
import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, FormControl } from '@angular/forms';
import { BackendService } from './backend.service';
function validateEmailFactory(backend:BackendService) {
return (c:FormControl) => {
let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
return EMAIL_REGEXP.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
};
}
export module CustomValidators {
@Directive({
selector: '[email][ngModel],[email][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Email), multi: true}
]
})
export class Email {
validator:Function;
constructor(backend:BackendService) {
this.validator = validateEmailFactory(backend);
}
validate(c:FormControl) {
return this.validator(c);
}
}
@Directive({
selector: '[url][ngModel],[url][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Url), multi: true}
]
})
export class Url {
validator:Function;
constructor(backend:BackendService) {
this.validator = validateEmailFactory(backend);
}
validate(c:FormControl) {
var pattern = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
return pattern.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
}
}
@Directive({
selector: '[goof][ngModel],[goof][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Goof), multi: true}
]
})
export class Goof {
validate(c:FormControl) {
return {
validateGoof: {
valid: false
}
};
}
}
}Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie einfach überprüfen Sie die
AbstractControl#hasError(...)Methode, um zu sehen, wenn das Steuerelement einen bestimmten Fehler.FormGroupundFormControlsind beideAbstractControls. fürFormControlSie übergeben als argument den Fehler Namen. Zum BeispielDen validator-Methode soll einen string zurückgeben/boolean-Karte, wo der Schlüssel ist der name des Fehlers. Dies ist der name, dass Sie überprüfen Sie in
hasErrorMethode.Für
FormGroupkönnen Sie als zusätzlichen parameter den Pfad zu derFormControl.nameist einfach der identifier derFormControlfür die Eingabe.Hier ist ein Beispiel, bei dem der
FormControlund dieFormGroupüberprüfen.UPDATE
Ok, also ich habe es funktioniert, aber es ist ein wenig langatmig. Ich konnte nicht herausfinden, wie man richtig Zugang zu den einzelnen
FormControlfür die Eingänge. Also, was ich Tat, war nur eine Referenz auf dieFormGroupDann auf Gültigkeit überprüfen, habe ich einfach die
hasErrorüberladung, übergeben Sie den Pfad für die Formular-Steuerelement-name. Für<input>verwendennameundngModel, dienameWert Hinzugefügt wird, die wichtigstenFormGroupmit diesem Namen alsFormControlNamen. So können Sie darauf zugreifen, wievorausgesetzt
name=nameCtrl. Beachten Sie dief.form. Diefist dieNgFormInstanz, die eineFormGroupmember-variableform.Unten ist die umgestalteten Beispiel
<form #f="ngForm">, und jetztfist die variable, die für dieFormGroup.ngFormist etwas, das bereitgestellt wird, so brauchen Sie nicht zu kümmern, Woher das kommt. Auch für die verschiedenen Eingänge können Sie<input #nameInput [formControl]="nameInput">, und dienameInputwürde Hinzugefügt werden, um diefform alsFormControl. Es gibt eine Menge von verschiedenen Möglichkeiten zum einrichten deklarative Vorlagen. Wenn Sie brauchen, um mehr zu helfen, werde ich wohl sehen müssen Sie Ihr setup in Ihrem templateSchrieb ich Satz von Richtlinien ähnlich
ng-messagesvon AngularJs zur Lösung dieses Problems im Winkel. https://github.com/DmitryEfimenko/ngx-messagesZur Vorlage getrieben Validierung, die Verwendung einer Attribut-Richtlinie wie unten:
.. mit der dazugehörigen markup-Code in Ihrer Vorlage:
HTH