Question

我有以下自定义验证程序类：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class NumberValidators {
  static phone(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (control.pristine) {
        return null;
      }
      const PHONE_REGEXP = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
      control.markAsTouched();
      if (PHONE_REGEXP.test(control.value)) {
        return {
          phone: true
        };
      }
      return null;
    };
  }
}

我有以下内容：

import { AbstractControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import {
  FormControl,
  Validators,
  ControlContainer,
  FormGroupDirective
} from '@angular/forms';
import { NumberValidators } from '../app.validators';

@Component({
  selector: 'app-telephone-input',
  templateUrl: 'telephone-input.component.html',
  styleUrls: ['telephone-input.component.css'],
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupDirective }
  ]
})
export class TelephoneInputComponent implements OnInit {
  telephoneControl: AbstractControl = new FormControl('', [
    Validators.required,
    NumberValidators.phone
  ]);
  constructor(private parent: FormGroupDirective) {}

  ngOnInit() {
    this.parent.form.addControl('telephoneControl', this.telephoneControl);
  }

  getErrorMessage() {
    return this.telephoneControl.hasError('required')
      ? 'You must enter a telephone number'
      : '';
  }
}

我的模板中包含以下内容（只是有关“提交”按钮的摘要）

<button type="submit" class="btn btn-success btn-send" value="Send message" [disabled]="!formModel.valid">Submit</button>

我的问题是，只要我在其中放置任何内容（包括字母），都可以启用“提交”按钮。似乎完全忽略了我的自定义验证器。

有什么主意我做错了吗？

如果需要，我很乐意提供更多信息。

Answer 1

我找到了答案。

我需要更改此内容：

NumberValidators.phone

对此：

NumberValidators.phone()

添加括号后，验证程序便开始验证。

评论者是正确的，我不得不颠倒验证检查的逻辑。

为什么我的角度自定义验证程序不会使我的表单无效？

1 个答案: