Angular формы для начинающих: пошаговое руководство

Создание формы

Создадим форму в HTML-шаблоне компонента:

  1. Используем тег <form>.
  2. Создаем <div> с классом form-group (Bootstrap). Этот класс группирует поля, надписи и другие элементы.
  3. Создаем <label> с атрибутом for, соответствующим id элемента <input>. Например: <label for=»common»>Новая возможность:</label>
  4. Создаем <input> типа text с id="common", placeholder="Введите сюда…" и классом form-control (Bootstrap).
  5. Добавляем кнопку <button type=»button» class=»btn btn-outline-success»>Добавить</button>.
<form>
  <div class="form-group">
    <label for="common">Новая возможность:</label>
    <input type="text" id="common" placeholder="Введите сюда..." class="form-control">
    <button type="button" class="btn btn-outline-success">Добавить</button>
  </div>
</form>

Обработка данных формы в Angular

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

  1. В HTML-форме добавляем обработчик событий ngSubmit и указываем вызываемый метод (например, addOption). В качестве параметра передаем значение поля ввода через #common (идентификатор элемента).
<form (ngSubmit)="addOption(common.value)">
  <div class="form-group">
    <label for="common">Новая возможность:</label>
    <input type="text" id="common" #common placeholder="Введите сюда..." class="form-control">
    <button type="submit" class="btn btn-outline-success">Добавить</button>
  </div>
</form>
  1. Создаем метод addOption в компоненте Angular:
addOption(option: string) {
  this.options.unshift(option);
}

Метод принимает значение из поля ввода (option) и добавляет его в начало массива options с помощью unshift().

Удаление элементов

Добавим функционал удаления элементов из массива:

  1. В цикле, отображающем элементы массива, добавим кнопку удаления для каждого элемента:
<button type="button" class="btn btn-danger btn-sm" (click)="deleteOption(option)"><span>×</span></button>

Добавим стили в component.css:

.btn-danger {
  font-size: 0.8em;
  padding: 5px 8px;
}
  1. Создаем метод deleteOption в компоненте:
deleteOption(option: string) {
  const index = this.options.indexOf(option);
  if (index > -1) {
    this.options.splice(index, 1);
  }
}

Метод находит индекс элемента в массиве и удаляет его с помощью splice().

Мы научились создавать формы в Angular, обрабатывать ввод пользователя, добавлять и удалять элементы из массива. Для работы с базами данных потребуется изучение дополнительных технологий.

Что будем искать? Например,программа