Blog

Validating inputs in mobile is very popular. Thanks to AngularJS, it can be quickly completed in one simple and convenient form. In the following example, you will learn how to create a required Input via ng-required directive, and how to resolve this issue in case the Input is not filled (show a message and disable the button):

1. First of all, there is a model with the following structure:
   • user (Object)
     • name (String)
2. In the scope, there is a user variable type of user (based on model described in step 1)
3. init function of the scope has a single line of code:

   $scope.user.name = 'Joe';

4. On the page, there is a HTML component with a Container property = form (there is no such option in a dropdown so simply type it).
5. Next add name property and set its value to myForm.
6. Inside the HTML component, there are Input and Text components.
7. Set the Input components to the following properties:
   • ng-model = user.name
   • name = userName
   • ng-required = true
8. For the text component set it to the following:
   • Color = assertive
   • text = Required (or any text you want)
   • ng-show = myForm.userName.$error.required
9. And finally, place the button below the HTML, and add a ng-disabled property with myForm.userName.$error.required value.

If you try to remove text from the input you will see that button becomes disabled, and a Required message will appear. This way you can produce more complex validations according to your needs. You can see how the example above is built by creating an app from this backup.

Make sure to check out all of our mobile development tips.