Nano Hash - криптовалюты, майнинг, программирование

Angular-Reactive Forms: как проверять поля после patchValue

У меня есть форма с подчиненными формами, использующая ControlValueAccessor

профиль-form.component.ts

form: FormGroup;
this.form = this.formBuilder.group({
        firstName: [],
        lastName: ["", Validators.maxLength(10)],
        email: ["", Validators.required]
      });

get lastNameControl() {
    return this.form.controls.lastName;
  }

initForm() {
    ...
       this.form.patchValue({
        firstName: "thompson",
        lastName: "vilaaaaaaaaaaaaaaaaaaaa",
        email: "[email protected]"
      });
    ...
  }

профиль-form.component.html

<label for="last-name">Last Name</label>
    <input formControlName="lastName" id="last-name" />
    <div *ngIf="lastNameControl.touched && lastNameControl.invalid" class="error">
      last name max length is 10
    </div>

Проблема:

Исходные данные загружаются в форму, но проверки не запускаются (например: поле Фамилия не проверяется). Я должен коснуться поля, после чего проверка начнет работать.

Как инициировать проверки сразу после выполнения patchValue.

см. код: https://stackblitz.com/edit/angular-wg5mxz?file=src/app/app.component.ts

Любое предложение приветствуется.


  • После патча вы можете вызвать this.form.updateValueAndValidity() 27.04.2021

Ответы:


1

Чтобы валидатор не отображал ошибки до того, как пользователь сможет отредактировать форму, вы должны проверить в элементе управления состояние «грязное» или «нажато».

Когда пользователь изменяет значение в отслеживаемом поле, элемент управления помечается как грязный. Когда пользователь размывает элемент управления формы, элемент управления помечается как касающийся.

Вы должны удалить lastNameControl.touched из своего *ngIf

Посетите https://angular.io/guide/form-validation для получения дополнительной информации.

27.04.2021

2

Это только потому, что вы показываете ошибку, когда затрагивается фамилия или адрес электронной почты, как упоминалось в @godocmat. Если вы просто удалите lastNameControl.touched или emailControl.touched из *ngIf, это сработает. Проверьте https://stackblitz.com/edit/angular-xced6b?file=src%2Fapp%2Fprofile-form%2Fprofile-form.component.html

27.04.2021
Новые материалы

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

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..