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>

myValidator：

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

这是一个傻瓜：http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview它似乎真的有效......（rc.4虽然）

Answer 1

我已将您的代码放入plunkr。

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

它运作得很好。您可以查看代码的其他部分。具体来说，我有自己的检查功能。

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

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

ngOnInit() {
    this.myDate = ''
  }

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

1 个答案: