Over a million developers have joined DZone.

AngularJS + TypeScript: How to Implement Validation

DZone 's Guide to

AngularJS + TypeScript: How to Implement Validation

· Web Dev Zone ·
Free Resource


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

Just like anormal AngularJS (based on JavaScript), the scope will now be extended with a property named “phoneform” – for that is how we called the form. So we need to adapt the IPhoneScope like this:

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”

Demo solution can be found here

java ,html5 ,javascript ,tips and tricks ,html & xhtml ,typescript ,angular.js

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}