Реактивные формы Angular, динамически генерирующие атрибут проверки на входе с использованием интерполяции

Мне кажется, что точно такая же проблема возникла в Динамически генерирующем атрибут проверки при вводе с использованием интерполяции, однако я ищу решение в Angular, а не в AngularJS.

В своих реактивных формах я использую такие валидаторы:

public contactForm: FormGroup = this.formBuilder.group({
  ...
  formControlDescription: [
    '',
    Validators.compose([
      Validators.maxLength(5000),
      Validators.minLength(30),
      Validators.required,
    ]),
  ],
  ...
});

На html я жестко кодирую число 5000 таким образом:

<mat-hint align="end">{{ contactForm.get('formControlDescription')!.value.length }} / 5000</mat-hint>

Вопрос: есть ли способ сделать это динамически для доступа к contactForm's formControlDescription Validators.maxLength(5000) в html?


typescript angular angular-reactive-forms angular-validation reactive-forms
person Daniel Danielecki    schedule 08.11.2020    source источник
comment
откуда вы в первую очередь получаете значение 5000?   -  person Metabolic    schedule 08.11.2020
comment
В html? Это жестко запрограммировано.   -  person Daniel Danielecki    schedule 08.11.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете получить объект ошибки из валидаторов min / max следующим образом:

<mat-hint align="end">{{ contactForm.get('formControlDescription')?.errors.maxlength?.actualLength }} / {{ contactForm.get('formControlDescription')?.errors.maxlength?.requiredLength }} </mat-hint>

немного более чистая версия:

<mat-hint align="end">    
  {{ contactForm.errors?.formControlDescription?.maxlength?.actualLength}} / 
  {{ contactForm.errors?.formControlDescription?.maxlength?.requiredLength}}
</mat-hint>

Официальная документация по maxLength Validator

Обновить

Значения валидаторов angular станут доступны вам только тогда, когда валидатор сработает и отобразится как недействительный.

Например, если у вас есть minLength(10), он даст вам недопустимый ввод в момент прикосновения и до тех пор, пока символы не станут или больше 10. То же самое для maxLength(20), оно будет доступно только в объекте errors после его запуска, т.е. пользователь имеет тип более 20 символы.

Это представляет проблему, если вы собираетесь использовать actualLength и requiredLength для последовательного отображения статистики пользователю, поскольку они будут отображаться только тогда, когда значение minLength или maxLength недопустимо.

Как уже говорилось, лучшим подходом для вас будет использование отдельной переменной для установки и отображения требуемой длины. Например:

const validatorOptions = {
  maxLength: 5000,
  minLength: 5
}

затем в своем шаблоне используйте его:

<mat-hint align="end">{{ contactForm.controls.formControlDescription?.value.length }} / {{validatorOptions.maxLength}}</mat-hint>
person Metabolic    schedule 08.11.2020
comment
это не я. Я не голосовал против, на самом деле я голосовал за. Скоро проверю, и если сработает, то приму ответ :) - person Daniel Danielecki; 08.11.2020
comment
Спасибо, @DanielDanielecki, кто-то проголосовал против, не указав никаких причин, и я не вижу, что не так с ответом. Можете попробовать мое предложение? прокомментируйте, если с этим возникнут какие-либо проблемы - person Metabolic; 08.11.2020
comment
maxlength не сработало, но minlength так работает ... Это показывает демо, в котором это как-то работает .. Хм, есть идея? Похоже, мне нужно жестко закодировать значение таким образом, но я действительно хочу сделать это так, как на этом демонстрация. - person Daniel Danielecki; 08.11.2020
comment
@DanielDanielecki, потому что ошибки становятся доступны вам только при срабатывании валидатора. У вас есть minLenght (50), поэтому ваш ввод недействителен до тех пор, пока он не достигнет 50 символов, он исчезнет из ошибок выше 50. Но поскольку у вас есть maxLength (5000), у вас не будет следующей ошибки, если вы не достигнете 5000+ символов. Я продемонстрировал это здесь stackblitz .com / edit / angular-8-reactive-form-b2xv2g? file = src / app / с minLenght (5) и maxLenght (10), надеюсь, это прояснит вам ситуацию. - person Metabolic; 09.11.2020
comment
Также просто предложение: наличие отдельной переменной - это неплохо, оправдывайте минимальный и красивый код временем, потраченным на его достижение, если нет какой-либо другой конкретной причины, по которой вы не хотите ее использовать. Вы можете обойти maxLength, чтобы дать вам значение еще до его запуска, но тогда у вас будет недопустимая форма, даже если ввод будет между min и max, и чтобы обойти это, потребуется еще больше кода - person Metabolic; 09.11.2020
comment
Получил теперь с ошибками, я создал общедоступные переменные, которые доступны для html, а также передаются в maxLenght (и minLength) - как в ответ. Сможете ли вы обновить свой ответ информацией, упомянутой в этих комментариях? Тогда я бы принял это. - person Daniel Danielecki; 09.11.2020
comment
Посмотри, Даниэль - person Metabolic; 09.11.2020
comment
Принято :) Кстати: я создал отдельную переменную для каждого валидатора, но это мелочь. Предпочтительно иметь выражение в type переменной, которая является number. - person Daniel Danielecki; 09.11.2020
comment
Это тоже хорошо, дело вкуса. Мне нравится группировать похожие данные вместе и вводить их с определенными интерфейсами. Упрощает набор текста в IDE. Рад, что ваша проблема решена, удачи :) - person Metabolic; 09.11.2020