Angular 2自定義驗證程序

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],
  })
}