Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор.
С двупосочно обвързване вашите компоненти могат да споделят данни, да обработват събития и да актуализират стойности в реално време.
Двупосочното свързване позволява на потребителите да въвеждат данни от HTML файла и да ги изпращат към TypeScript файла и обратно. Това е полезно за валидиране на въвеждане, манипулиране и др.
След като прехвърлите данни от HTML към TypeScriptfile, можете да използвате данните, за да завършите определена бизнес логика. Примерен сценарий би бил, ако искате да проверите дали името, въведено в полето за въвеждане, вече съществува.
Как можете да използвате двупосочно свързване?
Двупосочното обвързване в приложенията на Angular обикновено се задава в .html файл, използвайки ngModel директива. Двупосочното обвързване във формуляр за въвеждане може да изглежда по следния начин:
<вход
тип="електронна поща"
id="електронна поща"
име="електронна поща"
заместител ="[email protected]"
[(ngModel)]="имейл адрес"
/>В .ts файл, the имейл адрес променливата е обвързана с имейл адреса от формуляра.
имейл адрес: низ = ''; Как да настроите примерен формуляр в приложение Angular
Като създадете основно приложение, можете да използвате двупосочно свързване, за да проверите дали вече съществува потенциално потребителско име.
- Създавам ново приложение Angular.
- Стартирайте ng генерира компонент команда за създаване на нов компонент. Това е мястото, където ще съхранявате формуляра.
ng генерира формуляр за проверка на потребителско име на компонент - Заменете целия код във вашия app.component.html файл със следните тагове:
<формуляр за проверка на потребителско име на приложение></app-username-checker-form> - Добавете следния CSS към новия си компонент .css файл, намиращ се на потребителско име-проверка-form.component.css, за стилизиране на формата:
.контейнер {
дисплей: гъвкав;
подравняване на текст: център;
justify-content: център;
подравняване на елементи: център;
височина: 100vh;
}.карта {
ширина: 50%;
цвят на фона: прасковен пух;
радиус на границата: 1 rem;
подложка: 1 rem;
}вход {
граница: 3px твърди #1a659e;
радиус на границата: 5px;
височина: 50px;
височина на линията: нормална;
цвят: #1a659e;
дисплей: блок;
ширина: 100%;
оразмеряване на кутията: border-box;
потребител-изберете: Автоматичен;
размер на шрифта: 16px;
подложка: 0 6px;
padding-left: 12px;
}вход:фокус {
граница: 3px твърди #004e89;
}.btn {
дисплей: блок;
контур: 0;
курсор: показалец;
граница: 2px твърди #1a659e;
радиус на границата: 3px;
цвят: #Ф ф ф;
заден план: #1a659e;
размер на шрифта: 20px;
тегло на шрифта: 600;
височина на реда: 28px;
подложка: 12px 20px;
ширина: 100%;
поле отгоре: 1 rem;
}.btn:задръжте {
заден план: #004e89;
граница: #004e89;
}.успех {
цвят: #14ae83;
}.грешка {
цвят: #fd536d;
} - Добавете следния CSS в src/styles.css за да зададете семейството на шрифтовете, фона и цветовете на текста на цялото приложение:
@импортиране на url("https://fonts.googleapis.com/css2?family=Poppins: тегло@300;400&дисплей=размяна");тяло {
шрифтово семейство: "Попинз";
цвят на фона: papayawhip;
цвят: #1a659e;
} - Заменете кода в потребителско име-проверка-form.component.html, за да добавите формуляра за проверка на потребителско име:
<div клас="контейнер">
<div клас="карта">
<h1> Проверка на потребителско име </h1><форма>
<вход
тип="текст"
id="потребителско име"
име="потребителско име"
заместител ="Моля, въведете потребителско име"
/>
<бутон клас="btn"> Запазване </button>
</form></div>
</div> - Стартирайте приложението си с помощта на командата ng serve в терминала.
ng служи - Вижте вашето приложение на http://localhost: 4200/.
Изпращане на данни между HTML и TypeScript файловете
Използвайте двупосочно обвързване, за да изпратите данни до вашия .ts файл и обратно към .html файл. Това е възможно с използването на ngModel във формуляра вход етикети.
- Импортирайте FormsModule в app.module.ts файл и го добавете към внос масив:
импортиране {FormsModule} от '@angular/forms';@NgModule({
//...
внос: [
// друг импорт
FormsModule
],
//...
}) - Декларирайте a потребителско име класова променлива в .ts файл, потребителско име-проверка-form.component.ts:
потребителско име: низ = ''; - в потребителско име-проверка-form.component.html, добавете [(ngModel)] с потребителско име променлива във входния таг. Това позволява двупосочно обвързване и всичко, въведено във входното потребителско име на формуляра, се присвоява на променливата за потребителско име в .ts файл.
<вход
тип="текст"
id="потребителско име"
име="потребителско име"
заместител ="Моля, въведете потребителско име"
[(ngModel)]="потребителско име"
/> - За да тествате, че данните се изпращат до .ts файл, създайте a запази () метод в потребителско име-проверка-form.component.ts. Когато изпратите формуляра, приложението ще извика тази функция.
запази (): невалиден {
конзола.log(това.потребителско име);
} - Добавете ngИзпращане директива към
- Когато щракнете върху бутона Запазване, запази () ще отпечата стойността, въведена в полето за въвеждане на конзолата. Можете да видите конзолата по време на изпълнение, като използвате инструментите за разработчици на браузъра. Ако не сте запознати с браузъра DevTools или преглеждате конзолата, можете да научите повече за как да използвате Chrome DevTools.
- Изпрати потребителско име обратно към .html файл. Добавете променливата на потребителското име между фигурни скоби към потребителско име-проверка-form.component.html файл, след
- в потребителско име-проверка-form.component.ts, добавете някои променливи на класа, за да проверите дали потребителското име вече съществува. Декларирайте a потребителски имена масив с няколко взети потребителски имена и добавете a съобщение низ, който информира потребителя за проверката. Променливата isValidUsername е вярно, ако въведеното потребителско име не е в масива потребителски имена.
потребителски имена: низ [] = [ 'барт', 'Лиза', 'пържим', 'Лила' ];
съобщение: низ = '';
isValidUsername: булево = невярно; - The запази () методът трябва да провери дали въведеното потребителско име вече е в съществуващия масив с потребителски имена или не. В зависимост от резултата съобщението ще бъде съответно настроено.
запази (): невалиден {
ако (this.username != '') {
това.isValidUsername = !това.usernames.includes(
това.потребителско име.toLowerCase()
);ако (това.isValidUsername) {
това.съобщение = `Вашето ново потребителско име е '${това.username}'`;
} друго {
това.съобщение = `Потребителското име'${това.username}„вече е взето“.;
}
}
} - Завърши потребителско име-проверка-form.component.html файл, като показва дали въведеното потребителско име съществува или не. Добавете съобщение за грешка под
тагове след формуляра. The isValidUsername променлива е полезна тук, за да определите цвета на показаното съобщение.
<p *ngIf="потребителско име" [ngClass]="isValidUsername? 'успех': 'грешка'">
{{ съобщение }}
</стр> - Във вашия браузър на локален хост: 4200, опитайте да въведете потребителско име, което съществува в масива потребителски имена: След това опитайте да въведете потребителско име, което не го прави.
Използване на двупосочно свързване за изпращане на данни при разработване на приложение
Двупосочното обвързване е полезно за валидиране, проверки, изчисления и др. Той позволява на компонентите да комуникират и споделят данни в реално време.
Можете да използвате функции за двупосочно обвързване в различни части на приложение. След като получите данните от потребителя, можете да изпълните бизнес логиката и да информирате потребителя за резултатите.
Понякога бихте искали да съхранявате данните на потребителя в база данни. Можете да изследвате различни видове доставчици на база данни, които можете да използвате, включително Firebase NoSQL база данни.
