Почему [шаблон] не работает в Angular 5?

Question

В моем файле компонента .ts есть переменная типа (для ограничения ввода неверного номера телефона),

public phonePattern = ^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$;

И в моем html-файле компонента есть текстовое полеобъявляется как

<input type="text" [(ngModel)]="contact.phone" [pattern]="phonePattern" placeholder="Enter Phone Number" />

Здесь привязка [pattern], похоже, не работает .. Есть идеи?

Answer 1

Создание директивы проверки телефона.

import { Directive } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[phone]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: PhoneDirective, multi: true }
  ]
})
export class PhoneDirective implements Validator {
  constructor() {}

  validate(c: AbstractControl): { [key: string]: any } {
    if (c.value && !/^-?[1-9]?\d[,]-?[1-9]?\d$/gm.test(c.value)) {
      return {
        phone: 'Invalid phone number'
      };
    }

    return null;
  }
}

Теперь вы можете просто добавить атрибут телефона к вашему входу

<input type="text" [(ngModel)]="contact.phone" phone placeholder="Enter Phone Number" />

Answer 2

Используйте управляемые моделями формы, в которых есть встроенные методы для проверки регулярных выражений.

import { FormGroup, FormControl, Validators } from '@angular/forms';
.
.
.
class ModelFormComponent implements OnInit {
  myform: FormGroup;

  ngOnInit() {
    myform = new FormGroup({
        name: new FormGroup({
            firstName: new FormControl('', Validators.required), 
            lastName: new FormControl('', Validators.required),
        }),
        email: new FormControl('', [ 
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*") 
        ]),
        password: new FormControl('', [
            Validators.minLength(8), 
            Validators.required
        ]),
        language: new FormControl() 
    });
  }
}

вот образец модели, управляемой формой модель, управляемой формой

Answer 3

Что я в итоге сделал, это что-то вроде этого в компоненте:

number;
matchesRegex; //Define method

  ngOnInit() {
    //set method
    this.matchesRegex = function () {
      if (this.number === null) {
        return false;
      }
      return this.number.match(/^-?[1-9]?\d[,]-?[1-9]?\d$/gm);
    }
  }

Затем в моем HTML-шаблоне:

<input [(ngModel)]="number" [ngClass] = "{'is-valid': matchesRegex()}">

Это прекрасно работает, так как проверяется каждыйцикл и ваше значение обновляется, когда пользователь вводит.Вы можете использовать это, чтобы заблокировать отправку или отключить кнопку или что-то еще.Я просто использовал это для класса.Собственный валидатор не позволяет отправлять неверный шаблон.

Answer 4

Попробуйте инициализировать регулярное выражение следующим образом:

phonePattern = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;

И убедитесь, что ваш шаблон регулярных выражений правильный или нет.