Почему мой угловой пользовательский валидатор не сделает мою форму недействительной?

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()

Как только я добавил скобки, валидатор начал валидацию.

И комментатор был прав, мне пришлось поменять логику проверки правильности.