Angular Form Validation using ng-form

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

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 seasoned Senior Developer with strong expertise in React, TypeScript, Next.js, and Redux. He also has deep experience across the Microsoft ecosystem, including Azure, Microsoft 365, SPFx, and ...read more
 

Leave a comment