Angular Формы, управляемые шаблоном: Проверка поля пароля только после взаимодействия с пользователем

На чтение 4 мин Опубликовано 20.09.2024

Содержание

Вопрос или проблема
global_styles.scss
Полный код:
Демо Stackblitz
Ответ или решение
1. HTML-форма
2. CSS-стили
3. Полный код компонента
4. Дополнительные советы
Заключение

Вопрос или проблема

Angular Формы, управляемые шаблоном: Проверка поля пароля только после взаимодействия с пользователем

У меня есть форма:

<input
            type="password"
            id="password"
            name="password"
            ngModel
            #password="ngModel"
            placeholder="Введите текст"
            required
          />
          <span
            *ngIf="password.touched && password.invalid"
            id="passwordErrorMessage"
            class="text-danger"
            >Пароль обязателен.</span
          >
        </div>

Это форма, управляемая шаблоном.

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

Вам нужно изменить ваш CSS, чтобы также проверять ng-touched вместе с ng-invalid, это установит красную рамку только когда поле ввода было тронутым.

global_styles.scss

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

Полный код:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [FormsModule, CommonModule],
  standalone: true,
  styles: [
    `
  `,
  ],
  template: `
  <div>
    <input
      type="password"
      id="password"
      name="password"
      ngModel
      #password="ngModel"
      placeholder="Введите текст"
      required
    />
    <span
      *ngIf="password.touched && password.invalid"
      id="passwordErrorMessage"
      class="text-danger"
      >Пароль обязателен.</span
    >
  </div>
  `,
})
export class App {
  name="Angular";
}

bootstrapApplication(App);

Демо Stackblitz

Вы можете попробовать использовать метод markAsUntouched(). Смотрите документацию: https://v17.angular.io/api/forms/AbstractControl#markAsUntouched

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

const control = new FormControl();

// устанавливает состояние элемента управления так, как будто пользователь его не трогал
control.markAsUntouched();

Ответ или решение

Вопрос о валидации поля пароля в форме, использующей шаблонный подход в Angular, является важным моментом для улучшения взаимодействия с пользователем. Чтобы добиться того, чтобы поле ввода окрашивалось в красный цвет только после того, как пользователь взаимодействует с ним, необходимо внести изменения как в HTML, так и в CSS.

1. HTML-форма

Ваша форма будет выглядеть так:

<div>
  <input
    type="password"
    id="password"
    name="password"
    ngModel
    #password="ngModel"
    placeholder="Введите пароль"
    required
  />
  <span
    *ngIf="password.touched && password.invalid"
    id="passwordErrorMessage"
    class="text-danger"
  >Пароль обязателен.</span>
</div>

2. CSS-стили

Для того чтобы изменить стиль поля ввода, мы добавим правило CSS, которое будет применяться только в случае, если поле было "потрогано" (touched) и является "недействительным" (invalid):

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

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

3. Полный код компонента

Вот полный код вашего компонента в Angular:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [FormsModule, CommonModule],
  standalone: true,
  styles: [],
  template: `
  <div>
    <input
      type="password"
      id="password"
      name="password"
      ngModel
      #password="ngModel"
      placeholder="Введите пароль"
      required
    />
    <span
      *ngIf="password.touched && password.invalid"
      id="passwordErrorMessage"
      class="text-danger"
    >Пароль обязателен.</span>
  </div>
  `,
})
export class App {
  name = "Angular";
}

bootstrapApplication(App);

4. Дополнительные советы

Чтобы обеспечить более гибкое управление взаимодействием пользователя с формой, вы можете использовать метод markAsUntouched(), который позволяет установить состояние управления как "недотронутый" (untouched). Это может быть полезно, если вы хотите сбросить состояние валидации по какой-то причине.

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

const control = new FormControl();

// Устанавливает состояние управления так, как будто пользователь не касался его
control.markAsUntouched();

Это метод можно вызывать по определенным событиям, например, когда форма сбрасывается или при определенном действии пользователя.

Заключение

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