Wie Sie auf Formular-Validierung Muster in Eckig 2?

Nun, Sie brauchen nicht zu verwenden FormBuilder und alle diese komplizierten valiation eckige Sachen. Ich mehr details von dieser (Winkel-2.0.8 - 3march2016):
https://github.com/angular/angular/commit/38cb526

Beispiel aus der 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'>

Alternativer Ansatz (UPDATE Juni 2017)

Validierung ist NUR auf der server-Seite. Wenn etwas falsch ist, dann server Fehler zurück-code e.g HTTP 400 und folgende json-Objekt in der Antwort der Körper (als Beispiel):

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

In der html-Vorlage, die ich verwenden separate Tags (div/span/klein etc.)

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

Wenn die "Kapazität" ist der Fehler dann tag mit msg übersetzung sichtbar werden. Dieser Ansatz hat folgende Vorteile:

• es ist sehr einfach
• vermeiden backend-Validierung code-Duplizierung im frontend (für regexp-Validierung kann dies entweder verhindern oder erschweren ReDoS Angriffe)
• Kontrolle auf die Art der Fehler wird angezeigt (z.B. <small> tag)
• backend zurück error_name, die leicht zu übersetzen, um die richtige Sprache im frontend

Natürlich manchmal mache ich Ausnahme, wenn eine Validierung erforderlich ist, auf der frontend-Seite (z.B. retypePassword Feld in der Anmeldung nie senden zum server).

Konnte man bauen Ihr Formular mit Hilfe von FormBuilder, wie es lassen Sie mehr flexible Art und Weise zu konfigurieren, form.

export class MyComp {
  form: ControlGroup;

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

Dann in Ihre Vorlage ein :

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

Können Sie auch anpassen, ng-invalid CSS-Klasse.

Da tatsächlich keine Prüfungen für regex, haben Sie Ihren eigenen schreiben. Es ist eine einfache Funktion, die eine control-in-Eingang, und geben null zurück, wenn gültige oder eine StringMap wenn es 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};
    };
  }
}

Hoffe, dass es dir helfen.

Meine Lösung mit Eckigen 4.0.1: zeigen Nur die UI für erforderlich CVC-Eingang - wo die CVC muss genau 3 Ziffern:

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