Съдържание
Когато работим върху изграждането на приложения с една страница, един от точките, които можем да подчертаем, е въвеждането на данни, този тип функционалност обикновено се извършва с помощта на формаОчевидно, ако ще искаме данни от потребител, трябва да потвърдим, че те не идват с грешки.За щастие AngularJS Той има някои вътрешни механизми, които ни позволяват да правим валидиране по прост начин, като по този начин позволяват изпращането на формуляра само когато са изпълнени условията за формат на данни.
Първото нещо, от което ще се нуждаем, е a форма, ще поставим някои полета, например име, фамилия и имейл поле, като цяло това са най -използваните типове полета и това ще ни даде възможност да генерираме валидиране. Нека да видим първоначалния код, който имаме:
Име:Фамилия:Електронна поща:Възраст:Изпрати
Ако погледнем, използвахме характеристики на HTML за валидиране на полетата, например чрез поставяне на свойството задължително за задължителните полета те ще мислят, че това ще работи само в по -нови или съвместими браузъри HTML5 само, но когато използваме AngularJS, това ще запълни алтернативни валидации, ако отворим приложението в браузър, който не е съвместим с HTML5.
Виждаме, че полето за възраст има освен валидиране на типа две свойства на AngularJS които са за дължината на полето, това означава, че можем да поставим числа само между 1 и 3 цифри общо.
Засега вървим добре с нашето упражнение, но все пак трябва да потвърдим, че за да изпратим данните, всичко трябва да бъде потвърдено, за това трябва да генерираме контролер, който ни позволява да направим това, за това ще посочим във формата, която ще използваме контролера, ще променим реда:
Със следното:
Вътре в контролера имаме достъп до свойство, наречено $ валидно, който е този, който ще покаже дали нашата форма е валидна, за да можем да изпращаме данните, за това трябва да променим реда на бутона за изпращане на данни със следното:
Изпрати
Промяната трябва да бъде както следва:
Изпрати
Накрая можем да създадем нашия контролер в AngularJS, с който ще обработваме нашите данни:
функция AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Благодаря,' + $ scope.user.name + ', добавено е!'; }; } Това трябва да ни даде резултат като следния в нашия браузър:
