Angular Form Validation using ng-form

Ahamed Fazil Buhari
Senior Developer
Published On :   09 Oct 2017
Visit Count
Today :  1    Total :   1518

Hi everyone, in this article we will see how to validate your form using ng-form. There are few cases where you cannot use <form> tag in your page, especially if you are developing custom form for SharePoint List. And if you some knowledge on Angular then Angular Validation is made very simple using this form tag, what if you do not have any form tag in your page. To help this kind requirement we can make use of <ng-form>

We can use ng-required in our form and angular will take care of the validation, also we can make submit button enable/disable by checking form valid property ($invalid).

 <div ng-app="app">
     <ng-form id="EditForm" name="EditForm">
         <div ng-controller="mycontroller">
 <input type="text" ID="txtItem" ng- required ="true" ng-model="itemVals.Item" />
 <textarea title="Comments" name="newComment" ng-model="commentVal" cols="150" rows="4" placeholder="Enter Comments..." ng-required="true"></textarea>
 <input type="button" id="btnSave" ng-disabled="EditForm.$invalid" ng-click="SaveButtonClick()" title="Click to Save" value="Save" />

Happy Coding