Should we continue to use forms in AngularJS?

Question

Should we use the <form> element when working with AngularJS , since two-way data binding offers us direct control over form data in our controllers?

Should we use forms to respect the HTML structure, or are there other reasons why we should continue to use them? What are the disadvantages of an approach without using <form> elements?

 angular.module('formsOrNot', []) .controller('ExampleController', ['$scope', function($scope) { // Form example $scope.list1 = []; $scope.submit1 = function() { if ($scope.text1) { $scope.list1.push(this.text1); $scope.text1 = ''; } }; // Without form $scope.list2 = []; $scope.submit2 = function() { if ($scope.text2) { $scope.list2.push(this.text2); $scope.text2 = ''; } }; }]); 

 input.ng-invalid-required.ng-dirty, input.ng-invalid-email.ng-dirty { border: 1px solid red; } input.ng-invalid-required.ng-pristine, input.ng-invalid-email.ng-pristine { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="formsOrNot"> <div ng-controller="ExampleController"> <header> <h1>Forms or not</h1> </header> <section> <h2>Form example</h2> <form ng-submit="submit1()" novalidate> Enter text and hit enter: <input type="email" ng-model="text1" name="text1" required/> <input type="submit" id="submit1" value="Submit" /> <pre>list1={{list1}}</pre> </form> </section> <section> <h2>Without form</h2> Enter text and hit enter: <input type="email" ng-model="text2" name="text2" required/> <input type="submit" id="submit2" value="Submit" ng-click="submit2()"/> <pre>list2={{list2}}</pre> </section> </div> </div> 

Update as proof of @ZenDD's incorrect initial answer:

The two-way data binding works fine without form element, but without it you wont' be able to use benefits of Angular built-in form validation - incorrect

Try updating the fragment, this proves that the input is checked, not the form. Validation classes are added to both sections with or without a form.

In addition, the unvalidate effect unvalidate same for both sections, since a section without a form does not need this attribute.

So validation doesn't matter, right?

Update after @ZenDD updated his answer

We must use form elements because Angular treats them as directives that Angular uses to instantiate FormController . This controller allows us to use validation properties on elements that allow us to validate fields contained in the form. These properties appear in the @ZenDD update of the native response: $error, $pristine, $dirty

Answer 1

Two-way data binding works fine without a form element, but without it you cannot take advantage of the Angular built-in form validation, which is very useful. Angular Documents for forms . Basically, to enable validation, you should:

• Use a form element with the following attributes: name and novalidate ;
• All private input elements must contain the name and required attributes;

Then Angular automatically creates an object with properties such as: $ error, $ pristine, $ dirty, etc. You can use this object to verify the validity of your form or input elements.

UPDATE

Again, what you used above is another Angular feature - CSS validation classes. Yes, they work fine even without the form element and are automatically created using Angular when you use one of the specific HTML5 restriction attributes, such as email , number , required , etc. It is possible to use these classes to detect some errors and create some feedback for users, but in this case you will not be able to use JavaScript logic at all. Something like this will not be available:

 <form name="myForm" novalidate> <input type="text" name="myInputOne" required/> <input type="email" name="myInputTwo" required/> </form> <div ng-show="myForm.$invalid && myForm.$dirty"> <p>The following fields contain mistakes:</p> <span ng-show="myForm.myInputOne.$error.required"> Please enter your name. </span> <span ng-show="myForm.myInputTwo.$error.required"> Please enter your email. </span> <span ng-show="myForm.myInputTwo.$error.email"> Your email is incorrect. </span> </div> 

Answer 2

If you do not want to use the form element, you do not need to use it. Instead, you can use the ng-form directive located on some div , and still get the same benefits as AngularJS to control the form. But, YES, it will be much easier for you to process the angular validation form, rather than having to do it manually.

Answer 3

One aspect is how you plan to send data to the server. Are you using a traditional submit or AJAX form, for example?

Example: in a recent case, we sent form data to the server via AJAX and expected a page redirect, and the redirect URL was sent in an AJAX response, which we could process in our code to activate the redirect. However, this did not work in IE due to some third-party cookie problems, so we had to resort to the submit form and the server to control the page redirection in response.