使用 FormBuilder 进行 Angular 响应式(Reactive)表单自定义验证

Question

我有一个名为生产控制验证器的自定义验证器函数。

如果我像这样设置表单，一切正常:

this.validTest = new FormGroup({
    isdrawing: new FormControl(true),
    inventoryControl: new FormControl(null)
}, { validators: productionControlValidator });

但是，如果我使用这样的表单生成器设置表单:

this.validTest = this.fb.group({
    isdrawing: true,
    inventoryControl: null
}, { validators: productionControlValidator });

其中fb在构造函数中定义为private fb: FormBuilder，那么验证不起作用。我所说的“不起作用”是指表单的有效属性不正确，并且在控制台中我没有看到我期望的输出(它确实使用第一种方法显示)。

我是否没有在第二种方法中正确定义验证器(如果是这种情况，应该如何定义)，或者 FormBuilder 是否存在某些问题导致自定义验证器无法使用？

Answer 1

了解更多信息 ---> DEMO

在组件中使用自定义验证服务

import {CustomValidationService } from './custom.service'

this.validTest = this.fb.group({
    name: [null, [Validators.required, CustomValidationService.nameValidator],
    inventoryControl: [null, [CustomValidation]]
});

您可以将自定义验证服务创建为:

@Injectable()
export class CustomValidationService {
    // Name validation 
        static nameValidator(control: FormControl) {
            if (control.value) {
                const matches = control.value.match(/^[A-Za-z\s]+$/);
                return matches ? null : { 'invalidName': true };
            } else {
                return null;
            }
        }
}