Angular Form Validation using ng-form


Ahamed Fazil Buhari
SharePoint Developer
Published On :   09 Oct 2017
Visit Count
Today :  4    Total :   291
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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" />
  </div>           
     </ng-form>
 </div>
 

Happy Coding

Ahamed

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

Migratiin Tools for SharePoint