Блог

Создан новый файл numbers-not-allowed. Мое имя вводит в заблуждение, но это просто для тестирования перед фактической реализацией.

Если входное значение не равно hi, то должна возникнуть ошибка. Что я делаю не так.

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

export function NumbersNotAllowed(control: AbstractControl) {
    if (control.value !== 'hi') {
      return { containsNumber: true };
    }
    return null;
  }
  

В файле ts

      import { NumbersNotAllowed } from '../validators/numbers-not-allowed'; 
        ngOnInit() {
            this.contactForm = this.formBuilder.group({
              fullName: ['', [Validators.required, Validators.maxLength(70)], NumbersNotAllowed],
        }
        //for convience easy access to form fields
         get c() { return this.contactForm.controls }

    onSubmit() {
        console.log(this.contactForm.value);
        this.submitted = true;
        if (this.contactForm.invalid) {
          return;
        }
      }
}
  

HTML-шаблон. Остальная часть проверки работает, за исключением пользовательской.

  <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="apply-form">
       <div *ngIf="c.fullName.hasError('containsNumber')" data-tip="Error from custom validator"></div>
       <div *ngIf="c.fullName.touched">
       <div *ngIf="c.fullName.hasError('maxlength')" data-tip="Full name cannot be larger than 70 characters"></div>
       </div>
      <input formControlName='fullName' (focus)="nameInput()"
      [ngClass]="{'face error-border': (c.fullName.errors?.required amp;amp; c.fullName.touched) 
      || c.fullName.errors?.required amp;amp; submitted amp;amp; c.fullName.pristine}"
      placeholder="Your Full Name" type="text" tabindex="1">
 </form>
  

У меня есть несколько простых пользовательских проверок с использованием регулярных выражений, это помогает, когда количество проверок увеличивается для входных данных. Я применил его к вашему коду, поделившись ссылкой.Проверьте, помогает ли это https://stackblitz.com/edit/angular-9omtlr?file=src/app/app.component.ts

Переместите свой пользовательский валидатор в sync массив validators. Пример:

Синтаксис управления формой

 controlName: ['initalvalue', [sync validators], [async validtors]];
  

текущий код:

 fullName: ['', [Validators.required, Validators.maxLength(70)], NumbersNotAllowed],
  

исправить:

 fullName: ['', [Validators.required, Validators.maxLength(70), NumbersNotAllowed],
  

Yiu добавил валидатор «NumbersNotAllowed» в качестве асинхронного валидатора, добавьте его внутрь массива во втором аргументе FormControl «FullName»

 ngOnInit() {
    this.contactForm = this.formBuilder.group({
        fullName: ['', [Validators.required, Validators.maxLength(70), NumbersNotAllowed]]
    })
}