Question

如果我们根本不使用模板驱动表单，那么有人可以指导一下为Reactive表单实现自定义验证器的正确方法吗？

我已经完成了

https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

和

https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validation

两者最终都创建了一个指令，是否有必要？或者我们可以在不创建指令的情况下完成吗？

我试过了：

//my-app.module.ts
export interface ValidationResult {
    [key: string]: boolean;
}

function personName(control: FormControl): ValidationResult {

        if (!control.value) {
            return null;
        }

        var valid = /^[a-zA-Z. ]*$/.test(control.value);

        if (valid) {
            return null;
        }
        return { "pattern": true };
    }


@NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule
    ],
    declarations: [
        MyComponent
    ],
    exports: [
    ],
    providers: [{ provide: NG_VALIDATORS, useExisting: personName, multi: true }]
})
export class MyModule { }

但是当我将personName验证器应用到我的被动表单并在浏览器中测试时，我在控制台中得到以下错误：

ERROR Error: Uncaught (in promise): Error: No provider for personName!

Answer 1

使用反应式表单时，您不需要provide验证者。而是在组件中创建表单时将它们附加到formControl对象。使用表单生成器时，它看起来像：

ngOnInit() {
  this.myform = this.formBuilder.group({
    name: [undefined, personName],
  })
}

用于反应形式的Angular 2自定义验证器

1 个答案: