AngularJs supports all kinds of simple client-side validation. The simplest is data-ng-required which basically says a UI element must be filled in before the form is valid. I am picking up where I left off in my previous post – I am going to make the the phone input screen have validation.
Adapting the view
First of all we are going to tweak the view a little. This is just standard AnguarJS stuff, nothing TypeScript specific here yet:
I have underlined and written in red what is new:
- A wrapper div with a form name and a css class
- data-ng-required attribute, one on each field
- A data-ng-disabled attribute on the button that will enable/disable it when the input is not valid.
Adapting the scope
And once again we now have the advantage of a typed object.
Adapting the controller
This is also very simple: we need to create the canSave method. So in the PhoneController we add:
And that is basically most of what we need to do.
Adding some feedback css
Now to have some visual feedback to see if things are valid or not, we use (again) a standard AngularJS trick. In the view we have added the class “css-form” to the form. So we open the Site.css file in the content folder and add the following css:
Testing the validation
If you run the app (after emptying your cache) you will notice you cannot click the save button initially:
If you enter phone name, the field will become greenish. If you type something in the screen size field and then delete it again, the field will become reddish, and the button is still disabled.
Only when both fields are filled in the save button is enabled
An interesting way to mess up validation – or a bug?
According to numerous samples I saw, you don’t need to write data-ng-required=”true”. Just entering data-ng-required (or plain ng-required) should work as well. It does – your field is invalid when it is empty. Trouble is, if you enter data and then delete it again, the field stays valid – and the form too, and you can hit the save button with one empty field. I have no idea if that is a bug in the version of AnguarJS I use, or if this recently has been changed – but please make sure you write data-ng-required=”true”