расширенный пользовательский валидатор для шаблонно-управляемой формы с динамическим вводом

Question

STACKBLITZ

• killerString требуется число в первой позиции
• string1 + string2 + killerstring требуется общая длина менее 15 (например)
• Я попытался «скопировать / адаптировать» валидатор pattern из угловых источников.

Как я могу иметь customValidator, к которому прикреплена информация «динамических данных».На входе нет «хука», куда я могу прикрепить свои «динамические данные»

Есть ли у вас какие-либо предложения?

---

С помощью Сайеда я подобрался близко ... он очень хакерскийи я уверен, что это не работает, когда у вас есть несколько полей, использующих мой customLength валидатор:

https://stackblitz.com/edit/angular-4cvomu-zjlht5

---

Обновление 2

Я нашел РАБОЧЕЕ РЕШЕНИЕ с помощью это и , что .

одна вещь, которой все еще не хватает:

• когдастрока1 или строка2 «изменены», это не вызывает проверку в killerInput ...

Answer 1

Исходя из вашего обновленного сообщения, вам нужно прослушать изменения @Input в директиве. Это можно сделать с помощью ngChanges и registerOnValidatorChange, что поможет вам зарегистрировать функцию обратного вызова для вызова при изменении входов валидатора.

Класс killerInput можно установить с помощью переменной шаблона, ngClass и некоторого стиля:

HTML

  <input matInput #myInput=ngModel [ngClass]="{'error-class': myInput.invalid}" ....">

Директива

.....

  private _onChange: () => void;

  registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }

  ngOnChanges(changes: SimpleChanges): void {

    if ('customLength' in changes) {
      if (this._onChange) this._onChange();
    }
  }

CSS

.error-class{
  border: 2px solid  red
}

DEMO

Вы можете проверить эту статью.

Answer 2

измените следующие строки и отметьте

input-error-state-matcher-example.ts

с

const total_name = customLength.arr.join();

if (total_name.length > customLength.maxLength) {

на

const total_name = customLength.arr?customLength.arr.join(''):'';

if (total_name.length < customLength.maxLength) {

input-error-state-matcher-example.html

от

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2], maxLength: 15}">

до

<input matInput placeholder="killerstring" [(ngModel)]="killerstring" name = "TDkillerstring" #TDkillerstring = "ngModel" required [pattern]="pat1" [customLength]="{arr: [string1, string2, killerstring], maxLength: 15}">

теперь вы получите сообщение об ошибке, если комбинация из трех символов длины текстового поля превышает длину 15.

Я обновил свой код в stackblitz.проверьте здесь

https://stackblitz.com/edit/angular-4cvomu-7jpviu