角型2の同期検証最終リリース

Question

カスタム同期バリデーターを実装しようとしているときに、「プロミスかオブザーバブルを返すと予想されるバリデータ」というエラーが発生しました。私は、バリデータをビルドするためにFormControlクラスとFormGroupクラスを使用しています。

ベータ版から最終版へのこの変更は紛らわしいものです。親切に私を助けてください。事前に

おかげ

同じのために私のコードの下に見つけてください：

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

あなたのコード内でのミスがたくさんあります...

1からインポート行：

パッケージ@angular2/commonは存在しません。それは@angular/commonですが、あなたの場合、FormControlを取得したいのですが、これは@angular/formsパッケージに含まれています。

にすべきである：

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

2からメソッドのシグネチャ：

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

あるべき：

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

3から形態の構成：

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

上記のコードはUsernameValidatorがasyncバリですが、質問のタイトルによると、あなたはそれがsyncになりたいので、それは第二に（他のバリデータと一緒に行かなければならないことを意味します。パラメータ）。

は次のようになります。

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

ヒント：あなたはValidators.composeを使用する必要はありません、あなただけ（以下PLUNKERを参照）の配列を渡すことができます。

4からバリデータでは、（単数で）{ containsSpace: true }を返しているが、テンプレートでは、あなたは複数containsSpacesでそれをチェックしています。

また、PLUNKER（下記参照）に固定されているテンプレートには小さな誤りがあります。

ここではPLUNKERです。