Wie Formular Validierungsmuster in angular2 hinzufügen

Question

Sagen Sie, wenn ich eine einfache Form haben, die den Anfang und das Ende der Eingabe validieren muss nicht Platz.

In html5, werde ich dies tun: <input type="text" pattern="^(?!\s|.*\s$).*$">.

Was ist die richtige Eigenschaft für Validierungsmuster in der neuen Angular2 ngControl-Direktive? Die offizielle Beta-API enthält immer noch keine Dokumentation zu diesem Problem.

Update:

Es stellt sich heraus die Control class ist die praktikabelste Weg regex Prüfungsmuster zum form hinzuzufügen.

Hier ist ein example, die einen benutzerdefinierten Validator an der das beta Beispiel von den offiziellen Entwicklerhandbücher hinzugefügt.

Der Schlüssel ist, ein FormBuilder zu konstruieren und es der ngFormModel Eigenschaft des Elements <form> zuzuteilen.

Answer 1

Nun, Sie müssen nicht FormBuilder und all diese komplizierte valiation Winkel Sachen verwenden müssen. Ich habe weitere Informationen zu diesem (Angular 2.0.8 - 3march2016): https://github.com/angular/angular/commit/38cb526

Beispiel aus Repo:

<input [ngControl]="fullName" pattern="[a-zA-Z ]*"> 

ich es testen und es funktioniert :) - hier ist mein Code:

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm' > 
... 
<input 
    id='room-capacity' 
    type="text" 
    class="form-control" 
    [(ngModel)]='room.capacity' 
    ngControl="capacity" 
    required 
    pattern="[0-9]+" 
    #capacity='ngForm'> 

UPDATE Juni 2017

ich möchte nur, dass derzeit sagen, wenn ich mehr Erfahrung habe ich Verwenden Sie normalerweise folgenden "billigen" Ansatz zur Datenvalidierung:

Validierung ist nur auf der Serverseite (nicht in eckigen überhaupt!), Und wenn etwas falsch ist, dann Server (Restful API) zurück einige Fehlercode zB HTTP 400 und folgendes json Objekt in Reaktion Körpern (die in Winkeln I zu err Variable gesetzt):

this.err = { 
    "capacity" : "too_small" 
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name", 
    ... 
} 

(wenn Server return Validierungsfehler in anderes Format, dann können Sie in der Regel wo es mir leicht über Struktur)

in hTML-Template i verwenden separaten Tag (div/span/small usw.)

<input [(ngModel)]='room.capacity' ...> 
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small> 

Wie Sie sehen, wenn es ein Fehler in "Kapazität "Tag" mit der Fehlerübersetzung (in die Benutzersprache) wird sichtbar sein. Dieser Ansatz hat folgende Vorteile:

• es ist sehr einfach
• in Winkeln uns keine doppelte Code-Validierung, die (und muß) in Server (im Fall von regexp Validierung kann dies entweder verhindern oder ReDoS Angriffe erschweren)
• wir haben die volle Kontrolle über Art und Weise wird der Fehler auf Benutzer angezeigt werden (hier als egzample in <small> tag)
• weil in Server-Antwort geht es zurück ERROR_NAME (statt direkte Fehlermeldung), wir Fehlermeldung leicht ändern (oder übersetzen Sie es), indem Sie nur ändern y Frontend-Winkelcode (oder Dateien mit Übersetzungen). In diesem Fall müssen wir den Backend/Server-Code nicht berühren. manchmal

Natürlich (wenn dies erforderlich ist - z. B. retypePassword Feld, das an dem Server senden wird nie) Ich Ausnahmen von oben Ansatz machen und eine Validierung in Winkeln machen (aber verwenden ähnlichen „this.err“ Mechanismus Fehler zu zeigen (so verwende ich pattern nicht direkt in input Tagattribut sondern mache ich regexp Validierung in einigen Komponenten-Verfahren nach Benutzer richtiges Ereignis wie Input-Änderung erhöhen oder speichern).

Answer 2

Sie können Ihr Formular mit FormBuilder erstellen, da es Ihnen eine flexiblere Möglichkeit bietet, Formulare zu konfigurieren.

export class MyComp { 
    form: ControlGroup; 

    constructor(@Inject()fb: FormBuilder) { 
    this.form = fb.group({ 
     foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)] 
    }); 
    } 

Dann in Ihrer Vorlage:

<input type="text" ngControl="foo" /> 
<div *ngIf="!form.foo.valid">Please correct foo entry !</div> 

Sie können auch ng-invalid CSS-Klasse anpassen.

Da es tatsächlich keine Validatoren für Regex gibt, müssen Sie Ihre eigenen schreiben. Es ist eine einfache Funktion, die ein Steuerelement in der Eingabe verwendet und null zurückgibt, wenn sie gültig ist, oder eine StringMap, wenn sie ungültig ist.

export class MyValidators { 
    static regex(pattern: string): Function { 
    return (control: Control): {[key: string]: any} => { 
     return control.value.match(pattern) ? null : {pattern: true}; 
    }; 
    } 
} 

Ich hoffe, dass es Ihnen hilft.

Answer 3

Eine neuere Version 2.0.0-beta.8 (2016-03-02) enthält jetzt einen Validators.pattern Regex-Validator.

Siehe CHANGELOG

Answer 4

benutzerdefinierte Validierung Schritt für Schritt

HTML-Vorlage

<form [ngFormModel]="demoForm"> 
    <input 
    name="NotAllowSpecialCharacters"  
    type="text"      
    #demo="ngForm" 
    [ngFormControl] ="demoForm.controls['spec']" 
    > 

<div class='error' *ngIf="demo.control.touched"> 
    <div *ngIf="demo.control.hasError('required')"> field is required.</div> 
    <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div> 
</div> 
    </form> 

Component App.ts

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common'; 
import {CustomValidator} from '../../yourServices/validatorService'; 

unter Klasse definieren

demoForm: ControlGroup; 
constructor(@Inject(FormBuilder) private Fb: FormBuilder) { 
    this.demoForm = Fb.group({ 
     spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])), 
     }) 
} 

unter {../../yourServices/validatorService.ts

}

export class CustomValidator { 
    static specialCharValidator(control: Control): { [key: string]: any } { 
    if (control.value) { 
     if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {    
      return null; 
     } 
     else {    
      return { 'invalidChar': true }; 
     } 
    } 

} 

} 

Answer 5

Meine Lösung mit kantigen 4.0.1: Nur die Benutzeroberfläche für erforderlich CVC Eingang zeigt - wo die CVC genau 3-stellig sein muss:

<form #paymentCardForm="ngForm">   
... 
     <md-input-container align="start"> 
      <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required /> 
      <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result"> 
       <span [hidden]="!cvc2.errors.required && cvc2.dirty"> 
        CVC is required. 
       </span> 
       <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern"> 
        CVC must be 3 numbers. 
       </span> 
      </md-hint> 
     </md-input-container> 
... 
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button> 
</form>