Apstipriniet datu ievadi, izmantojot AngularJS

Strādājot pie vienas lapas lietojumprogrammu izveides, viens no punktiem, ko varam izcelt, ir datu ievadīšana, šāda veida funkcionalitāte parasti tiek veikta, izmantojot veidlapuAcīmredzot, ja mēs pieprasīsim datus no lietotāja, mums ir jāapstiprina, ka viņiem nav kļūdu.
par laimi AngularJS Tam ir daži iekšēji mehānismi, kas ļauj mums veikt apstiprināšanu vienkāršā veidā, tādējādi ļaujot veidlapu nosūtīt tikai tad, kad ir izpildīti datu formāta nosacījumi.
Pirmā lieta, kas mums būs nepieciešama, ir a veidlapu, mēs ievietosim dažus laukus, piemēram, vārdu, uzvārdu un e -pasta lauku, parasti tie ir visbiežāk izmantotie lauku veidi, un tas dos mums iespēju ģenerēt apstiprinājumus. Apskatīsim sākotnējo kodu, kas mums ir:

Vārds:Uzvārds:E-pasts:Vecums:Sūtīt

Ja paskatāmies, esam izmantojuši īpašības HTML lai apstiprinātu laukus, piemēram, ievietojot īpašumu nepieciešams obligātajos laukos viņi domās, ka tas darbosies tikai jaunākās vai saderīgās pārlūkprogrammās HTML5 tikai, bet kad mēs to izmantojam AngularJS, tas aizpildīs alternatīvas validācijas, ja mēs atvērsim lietojumprogrammu pārlūkprogrammā, kas nav saderīga ar HTML5.
Mēs redzam, ka vecuma laukam, izņemot tipa apstiprināšanu, ir divas īpašības AngularJS kas attiecas uz lauka garumu, tas nozīmē, ka mēs kopā varam ievietot tikai ciparus no 1 līdz 3 cipariem.
Līdz šim mums veicas labi, taču mums joprojām ir jāapstiprina, ka, lai nosūtītu datus, viss ir jāapstiprina, tāpēc mums ir jāģenerē kontrolieris, kas ļauj mums to izdarīt, jo mēs norādīsim veidlapā, kas kontrolieris izmantos, mēs mainīsim rindu:

Šādi:

Kontroliera iekšpusē mēs varam piekļūt īpašumam ar nosaukumu $ derīgs, kas norāda, vai mūsu veidlapa ir derīga, lai varētu nosūtīt datus, tāpēc mums ir jāmaina datu nosūtīšanas pogas rinda ar šādu:

Sūtīt

Modifikācijai jābūt šādai:

Sūtīt

Visbeidzot, mēs varam izveidot savu kontrolieri AngularJS, ar kuru mēs apstrādāsim savus datus:

 funkcija AddControllerUser ($ apjoms) {$ ulatums.message = ""; $ ulatums.addUser = funkcija () {$ darbības joma.message = 'Paldies,' + $ darbības joma. lietotājvārds + ', tas ir pievienots!'; }; } 

Tam vajadzētu iegūt tādu rezultātu kā mūsu pārlūkprogrammā:

Mēs redzam, ka, tā kā nav datu, poga Sūtīt ir atspējota, tas mainīsies, kad mēs aizpildīsim atbilstošos datus, kā redzam šajā attēlā:

Ja mēs būtu ievietojuši e -pastu ar nepareizu formātu, poga nebūtu aktivizēta, tad mēs redzam, kā AngularJS Tas mums ir veicinājis tik vienkāršas formas izstrādi, un ar šo mēs esam pabeiguši šo apmācību, un mēs esam spējuši pilnībā apstiprināt veidlapu, tikai izmantojot HTML5 Un mazliet AngularJS.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu