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

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是一个asyncvalidator，但是根据question[=64]的标题=]，你希望它是 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 }（在 singular 中），但在模板中，你是在 plural containsSpaces.
中检查它
此外，模板中存在一些小错误，已在 PLUNKER 中修复（见下文）。

这是 PLUNKER 的工作方式。

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

Synchronous Validation in Angular 2 Final Release

validation

observable

angular2-forms

angular