使用FormBuilder的角反应性表单自定义验证

Question

我有一个名为productionControlValidator的自定义验证器函数。

如果我像这样设置表单，一切都工作了：

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，则验证不起作用。所谓“不工作”，我的意思是表单的valid属性不正确，在控制台中我看不到预期的输出（使用第一个方法显示）。

我没有在第二个方法中正确定义验证器（如果是这样的话，应该如何定义它），或者FormBuilder有什么东西使自定义验证器不可用？

Answer 1

在formGroup中的value更改时触发窗体验证。

下面是一个示例：反应式表单自定义验证器

一旦更改表单的值，我们就可以触发整个表单的表单验证。

下面是示例类：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  validTest: FormGroup;
  hasError = false;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.validTest = this.fb.group ({
      isdrawing: [true, [Validators.required]],
      inventoryControl: ['10', [Validators.required, Validators.pattern('[0-9]*')]]
    });

    this.validTest.valueChanges.subscribe(form => {
      if(form) {
        this.productionControlValidator(form);
      }
    });
  }

  private productionControlValidator(form) {
    // custom validations for form controls

    if(form) {
      this.hasError = this.validTest.invalid;
    }
  }
}

html模板示例：

<form [formGroup]="validTest">
  <input 
    type="checkbox"
    formControlName="isdrawing"/>

    <input
      type="text"
      formControlName="inventoryControl"
    />

    <div *ngIf="hasError">Form contains errors !!!</div>
</form>

Answer 2

对于自定义验证器文档，请尝试使用验证器而不是验证器：https://angular.io/api/forms/AbstractControl#root

（validator validator fn | null）确定此控件同步有效性的函数。

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

Answer 3

更多信息---

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

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;
            }
        }
}