Question

我在尝试实现自定义同步验证器时收到错误'Expected validator to return Promise or Observable'。我正在使用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，所以它必须与其他验证器一起使用（在第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 }（单数），但在模板中，您需要在< strong>复数 containsSpaces。

此外，模板中存在一些小错误，这些错误已在 PLUNKER 中修复（见下文）。

此处PLUNKER工作。

Angular 2最终版本中的同步验证

1 个答案: