Angular 2中的同步驗證最終版本

在嘗試實現自定義同步驗證程序時，出現錯誤「預期驗證程序返回Promise或Observable」。我正在使用FormControl和FormGroup類來構建驗證器。Angular 2中的同步驗證最終版本

從測試版到最終版本的這種變化令人困惑。請幫助我。

由於提前

請在下面找到我的代碼是一樣的：

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>

來源

2017-06-11 Pareshan

自己沒有這樣做，所以沒有添加作爲答案，但可能會嘗試使你的函數'靜態cannotContainSpaces（control：Control）：Promise'並返回一個新的Promise，它將你想要的值解析爲' Promise.resolve（username.indexOf（''）> = 0？{'containsSpace'：true}：null）' – shaunhusain

有是很多在你的代碼錯誤...

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，所以它必須與其他驗證一起去（在第2 。參數）。

應該是：

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工作。

來源

2017-06-11 01:15:38 developer033

非常感謝@ developer033。除了其他突出的錯誤之外，錯誤否3非常重要，因爲我已經在異步塊中聲明驗證器，導致「預期驗證器返回Promise or Observable」錯誤。如果我錯了，請糾正我。 – Pareshan

是的，你是對的，我只是用這個解釋編輯我的答案:) – developer033

Angular 2中的同步驗證最終版本

回答

相關問題