Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере.
Уз двосмерно везивање, ваше компоненте могу да деле податке, управљају догађајима и ажурирају вредности у реалном времену.
Двосмерно везивање омогућава корисницима да уносе податке из ХТМЛ датотеке и шаљу их у ТипеСцрипт датотеку и назад. Ово је корисно за валидацију уноса, манипулацију и још много тога.
Када проследите податке из ХТМЛ-а у ТипеСцриптфиле, можете да користите податке да довршите одређену пословну логику. Пример сценарија би био ако желите да проверите да ли име унето у поље за унос већ постоји.
Како можете користити двосмерно везивање?
Двосмерно везивање у Ангулар апликацијама се обично поставља у .хтмл датотеку, користећи нгМодел директива. Двосмерно везивање у форми за унос може изгледати отприлике овако:
<улазни
типе="емаил"
ид="емаил"
наме="емаил"
плацехолдер="екампле@екампле.цом"
[(нгМодел)]="адреса Е-поште"
/>У .тс фајл, тхе адреса Е-поште променљива је везана за адресу е-поште из обрасца.
адреса е-поште: Стринг = ''; Како да подесите пример обрасца у апликацији Ангулар
Прављењем основне апликације можете користити двосмерно везивање да бисте проверили да ли потенцијално корисничко име већ постоји.
- Створити нова апликација Ангулар.
- Покренути нг генератор компонента команду за креирање нове компоненте. Овде ћете чувати образац.
нг генерише компоненту корисничко име-провера-форма - Замените сав код у свом апп.цомпонент.хтмл датотека са следећим ознакама:
<апп-усернаме-цхецкер-форм></app-username-checker-form> - Додајте следећи ЦСС у своју нову компоненту .цсс фајл, који се налази на усернаме-цхецкер-форм.цомпонент.цсс, за стилизовање обрасца:
.контејнер {
дисплеј: флек;
тект-алигн: центар;
јустифи-цонтент: центар;
алигн-итемс: центар;
висина: 100вх;
}.картица {
ширина: 50%;
боја позадине: бресква;
бордер-радиус: 1рем;
паддинг: 1рем;
}улазни {
граница: 3пк солид #1а659е;
бордер-радиус: 5пк;
висина: 50пк;
висина линије: нормална;
боја: #1а659е;
дисплеј блок;
ширина: 100%;
бок-сизинг: бордер-бок;
корисник-изаберите: ауто;
фонт-сизе: 16пк;
паддинг: 0 6пк;
паддинг-лефт: 12пк;
}улазни:фоцус {
граница: 3пк солид #004е89;
}.бтн {
дисплеј блок;
оутлине: 0;
курсор: показивач;
граница: 2пк солид #1а659е;
бордер-радиус: 3пк;
боја: #ффф;
позадина: #1а659е;
фонт-сизе: 20пк;
фонт-веигхт: 600;
лине-хеигхт: 28пк;
паддинг: 12пк 20пк;
ширина: 100%;
маргин-топ: 1рем;
}.бтн:лебдети {
позадина: #004е89;
граница: #004е89;
}.успех {
боја: #14ае83;
}.еррор {
боја: #фд536д;
} - Додајте следећи ЦСС у срц/стилес.цсс да подесите породицу фонтова, позадину и боје текста целокупне апликације:
@импорт УРЛ("https://fonts.googleapis.com/css2?family=Poppins: вгхт@300;400&дисплаи=свап");тело {
породица фонтова: "Поппинс";
бацкгроунд-цолор: папаиавхип;
боја: #1а659е;
} - Замените код у усернаме-цхецкер-форм.цомпонент.хтмл, да додате образац за проверу корисничког имена:
<див цласс="контејнер">
<див цласс="картица">
<х1> Провера корисничког имена </h1><форму>
<улазни
типе="текст"
ид="корисничко име"
наме="корисничко име"
плацехолдер="Унесите корисничко име"
/>
<дугме цласс="бтн"> сачувати </button>
</form></div>
</div> - Покрените своју апликацију користећи команду нг серве у терминалу.
нг служе - Погледајте своју пријаву на http://localhost: 4200/.
Слање података између ХТМЛ и ТипеСцрипт датотека
Користите двосмерно везивање за слање података на свој .тс датотеку и назад на .хтмл фајл. Ово је могуће уз употребу нгМодел у форми улазни ознаке.
- Увезите ФормсМодуле Инто тхе апп.модуле.тс датотеку и додајте је у увози низ:
увоз { ФормсМодуле } из '@ангулар/формс';@НгМодуле({
//...
увози: [
// други увоз
ФормсМодуле
],
//...
}) - Изјавити а корисничко име променљива класе у .тс фајл, усернаме-цхецкер-форм.цомпонент.тс:
корисничко име: стринг = ''; - У усернаме-цхецкер-форм.цомпонент.хтмл, додати [(нгМодел)] са корисничко име променљива у улазној ознаци. Ово омогућава двосмерно везивање, а све што се унесе у унос корисничког имена обрасца се додељује променљивој корисничког имена у .тс фајл.
<улазни
типе="текст"
ид="корисничко име"
наме="корисничко име"
плацехолдер="Унесите корисничко име"
[(нгМодел)]="корисничко име"
/> - Да би се тестирали ти подаци се шаљу на .тс датотеку, креирајте а сачувати() метода у усернаме-цхецкер-форм.цомпонент.тс. Када пошаљете образац, апликација ће позвати ову функцију.
сачувати(): празнина {
конзола.Пријава(ово.корисничко име);
} - Додајте нгСубмит директива за
- Када кликнете на дугме Сачувај, сачувати() функција ће одштампати вредност унету у поље за унос на конзолу. Можете да видите конзолу у току рада користећи алатке за програмере претраживача. Ако нисте упознати са алаткама за развој претраживача или прегледањем конзоле, можете сазнати више о томе како да користите Цхроме ДевТоолс.
- Пошаљу корисничко име назад на .хтмл фајл. Додајте променљиву корисничког имена између витичастих заграда у усернаме-цхецкер-форм.цомпонент.хтмл фајл, после
- У усернаме-цхецкер-форм.цомпонент.тс, додајте неке варијабле класе да проверите да ли корисничко име већ постоји. Изјавити а корисничка имена низ са неколико преузетих корисничких имена и додајте а порука стринг који обавештава корисника о чеку. Променљива исВалидУсернаме је тачно ако унето корисничко име није у низу корисничких имена.
корисничка имена: стринг[] = [ 'барт', 'лиса', 'пржити', 'леела' ];
порука: стринг = '';
исВалидУсернаме: боолеан = лажно; - Тхе сачувати() метода треба да провери да ли је унето корисничко име већ у постојећем низу корисничких имена или не. У зависности од исхода, порука ће бити подешена у складу са тим.
сачувати(): празнина {
иф (ово.корисничко име != '') {
ово.исВалидУсернаме = !ово.корисничка имена.инцлудес(
ово.корисничко име.тоЛоверЦасе()
);ако (ово.исВалидУсернаме) {
ово.мессаге = `Ваше ново корисничко име је '${ово.корисничко име}'`;
} друго {
ово.мессаге = `Корисничко име'${ово.корисничко име}„већ је заузето“.;
}
}
} - Завршити усернаме-цхецкер-форм.цомпонент.хтмл датотеку показујући да ли унето корисничко име постоји или не. Додајте поруку о грешци испод
ознаке након обрасца. Тхе исВалидУсернаме променљива је овде од помоћи за одређивање боје приказане поруке.
<п *нгИф="корисничко име" [нгЦласс]="исВалидУсернаме? 'успех': 'грешка'">
{{ порука }}
</п> - У вашем претраживачу на локални хост: 4200, покушајте да унесете корисничко име које постоји у низу корисничких имена: Затим покушајте да унесете корисничко име које није.
Коришћење двосмерног везивања за слање података приликом развоја апликације
Двосмерно везивање је корисно за валидацију, провере, прорачуне и још много тога. Омогућава компонентама да комуницирају и деле податке у реалном времену.
Можете да користите функције двосмерног везивања у различитим деловима апликације. Када добијете податке од корисника, можете извршити пословну логику и обавестити корисника о резултатима.
Понекад бисте желели да сачувате податке корисника у бази података. Можете истражити различите типове добављача база података које можете да користите, укључујући Фиребасе НоСКЛ базу података.
