Angular Form Validation using ng-form

Ahamed Fazil Buhari
 
Senior Developer
October 9, 2017
 
Rate this article
 
Views
2774

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

Category : Angular

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment