Synchrone Validierung in der endgültigen Freigabe von Angular 2

Question

Ich erhalte den Fehler 'Erwarteter Prüfer, um Versprechen oder Beobachtbar zurückzugeben', während ich versuche, einen benutzerdefinierten synchronen Prüfer zu implementieren. Ich benutze die FormControl und FormGroup-Klassen für die Bulding der Validatoren.

Dieser Wechsel von der Beta zur endgültigen Version ist verwirrend. Bitte hilf mir.

Vielen Dank im Voraus

Bitte unten meinen Code für die gleiche finden:

userNameValidator.ts

import { FormControl } from '@angular2/common'; 

export class UserNameValidator 
{ 


    static cannotContainSpaces(control:Control) 
    { 
    const username = control.value; 
    console.log(username + "here") 

    console.log(username.indexOf(' ')>=0 ? {'containsSpace':true} : null); 

    return username.indexOf(' ')>=0 ? {'containsSpace':true} : null; 

} 
} 

signup.component.ts

import { Component } from '@angular/core'; 
import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms'; 
import { UserNameValidator } from './userNameValidator'; 


@Component({ 
    selector: 'my-app', 
    templateUrl: './signup.component.html' 
}) 

export class SignupComponent 
{ 
    form: FormGroup; 

    constructor(fb: FormBuilder) 
    { 
    this.form = fb.group({ 
    username: 
    [null,Validators.compose([Validators.required,Validators.minLength(4)]), 
    UserNameValidator.cannotContainSpaces], 
    password: [null,Validators.compose([Validators.required])] 
    }) 

    } 

signup.component.html

<form [formGroup]="form" > 
    <div class="form-group"> 
    <label for="username">Username: </label> 
    <input 
     class= "form-control" 
     type="text" 
     formControlName="username"> 

     <div *ngIf="username.touched && 
     form.controls['username'].getError('required')" 
       class="alert alert-danger">Username cannot be empty 
     </div> 

     <div *ngIf="form.controls['username'].getError('minlength')" class = 
     "alert alert-danger"> 
       Username should have atlest 
       {{username.errors.minlength.requiredLength}} characters 
     </div> 

     <div 
      *ngIf="form.controls.username.hasError('containsSpaces')" 
      class="alert alert-danger" > Username Can't Contains Spaces</div> 

    </div> 

Answer 1

Es sind viele Fehler im Code ...

1 - Die Importlinie:

Das Paket @angular2/common existiert einfach nicht. Es ist @angular/common, aber in Ihrem Fall möchten Sie FormControl, die in @angular/forms Paket befindet.

sollte sein:

import { FormControl } from '@angular/forms'; 

2 - Die Signatur der Methode:

static cannotContainSpaces(control: Control) { ... } 

sollte sein:

static cannotContainSpaces(control: FormControl) { ... } 

3 - Die Konstruktion Form:

this.form = fb.group({ 
    username:[null, Validators.compose([Validators.required, Validators.minLength(4)]), 
UserNameValidator.cannotContainSpaces], 
    password: [null, Validators.compose([Validators.required])] 
}) 

Der obige Code bedeutet, dass die UsernameValidator ist ein asyncValidator, sondern nach dem Titel Frage, wollen Sie es sync sein, so dass es mit den anderen Validatoren (in der 2. geht zusammen . Parameter).

sollte sein:

this.form = fb.group({ 
    username: [ 
    null, 
    Validators.compose([ 
     Validators.required, 
     Validators.minLength(4), 
     UserNameValidator.cannotContainSpaces 
    ]) 
    ], 
    password: [null, Validators.compose([Validators.required])] 
}); 

Tipp: Sie müssen Validators.compose nicht verwenden, können Sie einfach ein Array übergeben (siehe Plunker unten).

4 - In Validator Sie Rückkehr { containsSpace: true } (in Singular), aber in Vorlage, sind Sie es in PluralcontainsSpaces überprüfen.

Außerdem gibt es kleinere Fehler in der Vorlage, die in PLUNKER (siehe unten) behoben sind.

Hier ist die PLUNKER arbeiten.