2016-11-24 2 views
1

Я пытаюсь реализовать функции проверки async (isUnique) и sync (cannotContainSpace) для поля имени пользователя, я хочу увидеть, что «это имя пользователя уже используется в качестве предупреждения msg, если значение текстового поля« yener ». Функция синхронизации работает нормально, но я думаю, ss ниже, может помочь объяснить мою проблему;angular2 async validation this.subscribe exception?

Примечание: canNotContain синхронизации проверки FUNC работает нормально, aafter я добавил функцию асинхронной isUnique произошедший это исключение ..

enter image description here

, как я могу это исправить

? usernamevalidator.ts

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

export class UsernameValidator{ 
    static isUnique(control:FormControl){ 
     return new Promise((resolve, reject)=>{ 
      setTimeout(function(){ 
       debugger 
       if(control.value =="yener") 
        resolve({isUnique:true}) 
       else 
        resolve(null) 
      },1000); 
     });   
    } 
    static cannotContainSpace(control:FormControl){ 
     if(control.value.indexOf(' ')>=0) 
      return { cannotContainSpace:true }; 
     return null; 
    } 
} 

postmessage.component.ts

import { Component } from '@angular/core'; 
import {FormControl,FormGroup,FormBuilder,Validators} from '@angular/forms'; 
import {UsernameValidator} from '../../validators/usernamevalidator'; 

@Component({ 
    moduleId:module.id, 
    selector: 'post-message', 
    templateUrl: '../../templates/postmessage.component.html' 
}) 
export class PostComponent { 
    form : FormGroup; 
    constructor(fb:FormBuilder){ 
     this.form = fb.group({ 
      username:['', Validators.compose([Validators.required, UsernameValidator.cannotContainSpace]),Validators.compose([UsernameValidator.isUnique])],    
      email:['', Validators.required],   
      message:['', Validators.required]   
     }); 
    } 
    signup(){ 
     console.log(this.form.value); 
    } 
} 

здесь HTML шаблон:

<form class="from-horizontal" [formGroup]="form" (ngSubmit)="signup()"> 
     <div class="form-group row"> 
      <label for="username" class="control-label col-md-2">Name:</label> 
      <div class="col-md-6"> 
       <input type="text" id="username" class="form-control" formControlName="username"> 
       <div *ngIf="form.controls['username'].touched && form.controls['username'].errors"> 
       <div class="alert alert-danger" 
       *ngIf="form.controls['username'].errors.required"> 
        User name is required. 
       </div> 
       <div class="alert alert-danger" 
       *ngIf="form.controls['username'].errors.cannotContainSpace"> 
        User name can not contain space 
       </div> 
       <div class="alert alert-danger" *ngIf="form.controls['username'].errors.isUnique"> 
        This user name already in use. 
       </div> 
       </div> 
      </div>... 

ответ

3

это странно, я, хотя мы можем использовать "() Validators.compose" функцию в виде строителя initializer as async parameters, но angular2 не согласен со мной. Я только что изменился;

имя пользователя: [ '', Validators.compose ([Validators.required, UsernameValidator.cannotContainSpace]), Validators.compose ([UsernameValidator.isUnique])],

в

имя пользователя: [ '', Validators.compose ([Validators.required, UsernameValidator.cannotContainSpace]), UsernameValidator.isUnique],

и она работает

Редакция: также я понял, если вы хотите использовать несколько асинхронных валидатор в компоненте использовании

Validators.composeAsync()

функции.

Смежные вопросы