Verifiera datainmatning med AngularJS

När vi arbetar med att bygga enkelsidiga applikationer, är en av punkterna som vi kan markera datainmatning, denna typ av funktionalitet görs vanligtvis med hjälp av en formUppenbarligen, om vi ska begära data från en användare, måste vi validera att de inte kommer med fel.
som tur är AngularJS Den har några interna mekanismer som gör att vi kan göra valideringar på ett enkelt sätt, så att formuläret bara kan skickas när dataformatvillkoren är uppfyllda.
Det första vi kommer att behöva är en form, vi ska placera några fält, till exempel namn, efternamn och ett e -postfält, i allmänhet är dessa de mest använda fälttyperna och det ger oss möjlighet att generera valideringar. Låt oss se den första koden vi har:

Namn:Efternamn:E-post:Ålder:Skicka

Om vi ​​tittar har vi använt egenskaper hos HTML för att validera fälten, till exempel genom att placera egendomen nödvändig för obligatoriska fält tror de att detta bara fungerar i nyare eller kompatibla webbläsare HTML5 bara, men när vi använder AngularJS, detta fyller alternativa valideringar om vi öppnar programmet i en webbläsare som inte är kompatibel med HTML5.
Vi ser att åldersfältet, förutom typvalidering, har två egenskaper för AngularJS som är för fältets längd, betyder det att vi bara kan placera siffror mellan 1 och 3 siffror totalt.
Hittills går vi bra med vår övning, men vi måste fortfarande validera att för att skicka data måste allt valideras, för detta måste vi generera en controller som gör att vi kan göra detta, för detta kommer vi att indikera till formuläret som kontrollen kommer att använda, för att vi ska ändra raden:

Med följande:

Inne i handkontrollen kan vi komma åt en egendom som kallas $ giltigt, som är den som kommer att indikera om vårt formulär är giltigt för att kunna skicka data, för detta måste vi ändra raden för dataskicka -knappen med följande:

Skicka

Ändringen ska vara följande:

Skicka

Slutligen kan vi skapa vår controller i AngularJS som vi ska behandla våra data med:

 funktion AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Tack,' + $ scope.user.name + ', det har lagts till!'; }; } 

Detta bör ge oss ett resultat som följande i vår webbläsare:

Vi ser att eftersom det inte finns några data är skicka -knappen inaktiverad, detta kommer att ändras när vi fyller i lämplig data som vi ser i följande bild:

Om vi ​​hade lagt ett e -postmeddelande med ett felaktigt format hade knappen inte aktiverats, då ser vi hur AngularJS Det har underlättat utvecklingen för oss i något så enkelt som en form och med detta avslutade vi denna handledning, vi har kunnat validera ett formulär på ett fullständigt sätt, endast med hjälp av egenskaper för HTML5 Och lite AngularJS.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng