Создание формы
Создадим форму в HTML-шаблоне компонента:
- Используем тег <form>.
- Создаем <div> с классом form-group (Bootstrap). Этот класс группирует поля, надписи и другие элементы.
- Создаем <label> с атрибутом for, соответствующим id элемента <input>. Например: <label for=»common»>Новая возможность:</label>
- Создаем <input> типа text с id="common", placeholder="Введите сюда…" и классом form-control (Bootstrap).
- Добавляем кнопку <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 для обработки данных формы. Нам нужен метод в компоненте, который будет принимать данные из формы и добавлять их в массив.
- В 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>
- Создаем метод addOption в компоненте Angular:
addOption(option: string) {
this.options.unshift(option);
}
Метод принимает значение из поля ввода (option) и добавляет его в начало массива options с помощью unshift().
Удаление элементов
Добавим функционал удаления элементов из массива:
- В цикле, отображающем элементы массива, добавим кнопку удаления для каждого элемента:
<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;
}
- Создаем метод deleteOption в компоненте:
deleteOption(option: string) {
const index = this.options.indexOf(option);
if (index > -1) {
this.options.splice(index, 1);
}
}
Метод находит индекс элемента в массиве и удаляет его с помощью splice().
Мы научились создавать формы в Angular, обрабатывать ввод пользователя, добавлять и удалять элементы из массива. Для работы с базами данных потребуется изучение дополнительных технологий.