用于反应形式的Angular 2自定义验证器-Java 学习之路

如果我们根本不使用模板驱动的表单，那么有人可以指导为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!

1 回答

0
使用反应形式时，您不需要 provide 您的验证器 . 而是在组件中创建表单时将它们附加到 formControl 对象 . 使用表单生成器时，它看起来像：
```
ngOnInit() {
  this.myform = this.formBuilder.group({
    name: [undefined, personName],
  })
}
```
回复于 2024-04-19T23:58:50+08:00

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

1 回答

相关问题