Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.
Благодаря двусторонней привязке ваши компоненты могут обмениваться данными, обрабатывать события и обновлять значения в режиме реального времени.
Двусторонняя привязка позволяет пользователям вводить данные из файла HTML и отправлять их в файл TypeScript и обратно. Это полезно для проверки ввода, манипуляций и многого другого.
После того как вы передадите данные из HTML в файл TypeScript, вы сможете использовать их для завершения определенной бизнес-логики. Примером сценария может быть ситуация, когда вы хотите проверить, существует ли уже имя, введенное в поле ввода.
Как вы можете использовать двустороннюю привязку?
Двусторонняя привязка в приложениях Angular обычно устанавливается в .html файл, используя нгМодель директива. Двусторонняя привязка в форме ввода может выглядеть примерно так:
<вход
тип="электронная почта"
идентификатор ="электронная почта"
имя="электронная почта"
заполнитель ="пример@пример.com"
[(нгМодель)]="Адрес электронной почты"
/>в .тс файл, Адрес электронной почты переменная привязана к адресу электронной почты из формы.
адрес электронной почты: строка = ''; Как настроить пример формы в приложении Angular
Создавая базовое приложение, вы можете использовать двустороннюю привязку, чтобы проверить, существует ли потенциальное имя пользователя.
- Создать новое угловое приложение.
- Запустите нг генерировать компонент Команда для создания нового компонента. Здесь вы будете хранить форму.
ng сгенерировать компонент username-checker-form - Замените весь код в вашем app.component.html файл со следующими тегами:
<app-username-checker-form></app-username-checker-form> - Добавьте следующий CSS в ваш новый компонент .css файл, расположенный по адресу имя пользователя-checker-form.component.css, чтобы стилизовать форму:
.контейнер {
дисплей: гибкий;
выравнивание текста: по центру;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
высота: 100вх;
}.карта {
ширина: 50%;
цвет фона: персиковый;
радиус границы: 1rem;
набивка: 1рем;
}вход {
граница: 3пиксели сплошные № 1а659е;
радиус границы: 5px;
высота: 50 пикселей;
высота строки: нормальная;
цвет: № 1а659е;
дисплей: блок;
ширина: 100%;
box-sizing: граница-коробка;
пользователь-выбирать: авто;
размер шрифта: 16px;
отступ: 0 6 пикселей;
отступ слева: 12px;
}вход: фокус {
граница: 3пиксели сплошные #004e89;
}.btn {
дисплей: блок;
контур: 0;
курсор: указатель;
граница: 2пиксели сплошные № 1а659е;
радиус границы: 3px;
цвет: #ффф;
фон: № 1а659е;
размер шрифта: 20px;
вес шрифта: 600;
высота строки: 28px;
отступ: 12px 20px;
ширина: 100%;
поле-верх: 1re;
}.btn:наведите {
фон: #004e89;
граница: #004e89;
}.успех {
цвет: #14ae83;
}.ошибка {
цвет: #fd536d;
} - Добавьте следующий CSS в источник/styles.css чтобы установить семейство шрифтов, фон и цвета текста всего приложения:
@импорт URL("https://fonts.googleapis.com/css2?family=Poppins: вес@300;400&дисплей=своп");тело {
семейство шрифтов: "Поппинс";
фоновый цвет: папайя;
цвет: № 1а659е;
} - Замените код в имя пользователя-checker-form.component.html, чтобы добавить форму проверки имени пользователя:
<раздел класс ="контейнер">
<раздел класс ="карта">
<h1> Проверка имени пользователя </h1><форма>
<вход
тип="текст"
идентификатор ="имя пользователя"
имя="имя пользователя"
заполнитель ="Пожалуйста введите имя пользователя"
/>
<класс кнопки ="бтн"> Сохранять </button>
</form></div>
</div> - Запустите приложение с помощью команды ng serve в терминале.
нг служить - Просмотрите свое приложение на http://localhost: 4200/.
Отправка данных между файлами HTML и TypeScript
Используйте двустороннюю привязку для отправки данных на .тс файл и вернуться к .html файл. Это возможно с использованием нгМодель в форме вход теги.
- Импортировать ФормыМодуль в app.module.ts файл и добавить его в импорт множество:
Импортировать {Модуль форм} от '@угловые/формы';@NgModule({
//...
импорт: [
// другой импорт
ФормыМодуль
],
//...
}) - объявить имя пользователя переменная класса в .тс файл, имя пользователя-checker-form.component.ts:
имя пользователя: строка = ''; - В имя пользователя-checker-form.component.html, добавлять [(нгМодель)] с имя пользователя переменная во входном теге. Это обеспечивает двустороннюю привязку, и все, что вводится в поле ввода имени пользователя формы, назначается переменной имени пользователя в .тс файл.
<вход
тип="текст"
идентификатор ="имя пользователя"
имя="имя пользователя"
заполнитель ="Пожалуйста введите имя пользователя"
[(нгМодель)]="имя пользователя"
/> - Чтобы проверить, что данные отправляются в .тс файл, создайте сохранять() метод в имя пользователя-checker-form.component.ts. Когда вы отправляете форму, приложение вызывает эту функцию.
сохранять(): пустота {
консоль.бревно(этот.имя пользователя);
} - Добавить нгОтправить директива
- При нажатии на кнопку Сохранить появляется сохранять() функция выведет значение, введенное в поле ввода, на консоль. Вы можете просматривать консоль во время выполнения, используя инструменты разработчика браузера. Если вы не знакомы с браузерными DevTools или просмотром консоли, вы можете узнать больше о как использовать Chrome DevTools.
- Отправить имя пользователя назад к .html файл. Добавьте переменную имени пользователя между фигурными скобками в имя пользователя-checker-form.component.html файл, после
- В имя пользователя-checker-form.component.ts, добавьте несколько переменных класса, чтобы проверить, существует ли уже имя пользователя. объявить имена пользователей массив с несколькими занятыми именами пользователей и добавить сообщение строка, информирующая пользователя о проверке. Переменная isValidUsername имеет значение true, если введенное имя пользователя отсутствует в массиве имен пользователей.
имена пользователей: строка[] = [ 'Барт', 'лиза', 'жарить', 'Лила' ];
сообщение: строка = '';
ИмяВалидПользователя: логический = ЛОЖЬ; - сохранять() метод должен проверять, находится ли введенное имя пользователя уже в существующем массиве имен пользователей или нет. В зависимости от результата сообщение будет установлено соответствующим образом.
сохранять(): пустота {
если (это.имя_пользователя != '') {
этот.isValidUsername = !этот.usernames.includes(
этот.имя пользователя.toLowerCase()
);если (этот.isValidUsername) {
этот.сообщение = `Ваше новое имя пользователя '${этот.имя пользователя}'`;
} еще {
этот.сообщение = `Имя пользователя'${этот.имя пользователя}'уже забрали';
}
}
} - Завершить имя пользователя-checker-form.component.html файла, показывая, существует ли введенное имя пользователя или нет. Добавьте сообщение об ошибке под
теги после формы. isValidUsername Здесь переменная полезна для определения цвета отображаемого сообщения.
<р *нгЕсли="имя пользователя" [нгкласс] ="действительное имя пользователя? 'успех': 'ошибка'">
{{ сообщение }}
</п> - В вашем браузере на локальный: 4200, попытайтесь ввести имя пользователя, существующее в массиве имен пользователей: Затем попытайтесь ввести другое имя пользователя.
Использование двусторонней привязки для отправки данных при разработке приложения
Двусторонняя привязка полезна для проверки, проверки, расчетов и многого другого. Это позволяет компонентам обмениваться данными и обмениваться данными в режиме реального времени.
Вы можете использовать функции двусторонней привязки в различных частях приложения. Получив данные от пользователя, вы можете выполнить бизнес-логику и сообщить пользователю о результатах.
Иногда вам может понадобиться сохранить данные пользователя в базе данных. Вы можете изучить различные типы поставщиков баз данных, которые вы можете использовать, включая базу данных Firebase NoSQL.
