Angular2（rc.5）使用自定义验证器将表单设置为无效

Question

我在其中一个字段上使用带有自定义验证器的模板驱动表单：

<button type="button" (click)="myForm.submit()" [disabled]="!myForm.valid" class="btn">Save</button>
<form #myForm="ngForm" (ngSubmit)="submit()">
   ...
   <input type="text"
                 class="validate"
                 [(ngModel)]="myDate"
                 name="myDate"
                 ngControl="myDate"
                 myValidator/>
</form>

我的验证器：

import { Directive, forwardRef } from '@angular/core'
import { NG_VALIDATORS, FormControl, Validator } from '@angular/forms'

function check(s: string) {
   ...
}

function customValidation() {
  return (c: FormControl) => {
    return check(c.value) ? null : {
      myValidator: false
    }
  }
}


@Directive({
  selector: '[myValidator ][ngModel],[myValidator ][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyValidator), multi: true }
  ]
})
export class MyValidator implements Validator {

  validator: Function

  constructor() {
    this.validator = customValidation()
  }

  validate(c: FormControl) {
    return this.validator(c)
  }
}

在球场上一切都很好。唯一的问题是验证器将字段设置为无效，表单未设置为无效，因此保存按钮未禁用。我不明白为什么。我想我忘记了验证器和表单之间的链接。

我正在使用 angular_forms 0.3.0

这是一个 plunkr ：http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview，它似乎确实有效......（虽然是 rc.4）

Answer 1

我已将您的代码放入 plunkr。

http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview

而且效果很好。您可以检查代码的其他部分。具体来说，我有自己的 check 功能。

function check(s: string) {
  if(s.length > 0){
    return true;
  }else{
    return false;
  }
}

您是否初始化了 myDate 值？如果它没有被初始化，我会在开始时得到一个有效的表单。

ngOnInit() {
    this.myDate = ''
  }