Проверка шаблона в угловых 7

Question

У меня есть поле контактного номера в моей Angular 7 форме. Я использовал для проверки 'builder формы' и 'validators.pattern'. В HTML я попытался двумя способами определить, был лиошибка, но оба не работали.

TypeScript: mobnumPattern = "^[6-9][0-9]{9}$"; this.myForm = this.formbuilder.group({ contact_no: ['', [Validators.required,Validators.pattern(this.mobnumPattern)]],} )

1.При использовании HTML ниже, проверка всегда показывает true

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].hasError(pattern)))"

2.При использованииниже HTML, проверка всегда показывает false

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].errors.pattern))"

Есть идеи, как решить эту проблему?.

Заранее спасибо.

Answer 1

Давайте рассмотрим оба случая, о которых вы упомянули.

1.При использовании HTML ниже, проверка всегда показывает true

Я пытался воссоздать проблему в stackblitzно это всегда ложно в отличие от того, что вы сказали.В любом случае проверка myForm.controls['contact_no'].hasError(pattern) возвращает ложь, поскольку hasError() означает , ожидая строку в качестве параметра, , но шаблон здесь не определен.

Используйте это, чтобы проверить, есть ли в элементе управления формы ошибки проверки шаблона.

*ngIf="((myForm.controls['contact_no'].touched)&& myForm.controls['contact_no'].hasError('pattern')))"

2.При использовании HTML ниже, проверка всегда показывает false

myForm.controls['contact_no'].errors будет нулевым, если в элементе управления формы нет ошибок проверки,Поэтому при проверке myForm.controls['contact_no'].errors.pattern в шаблоне будет выдано сообщение об ошибке и возвращено неопределенное значение.Используйте безопасный оператор навигации для защиты от ошибки отображения представления, если myForm.controls ['contact_no']. Errors имеет значение null.

Например:

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].errors?.pattern)"

Я сделал stackblitz с вышеупомянутым исправлением.Проверьте ссылку, чтобы увидеть рабочее демо.