form best practices (angularjs 1.6)

Question

I have seen different ways of implementing a form and its logic behind to interact with the controller, and I would like to know what is the best approach to follow.

Example:

<form name="myForm" ng-submit="submit(user)">
  username: <input name="username" ng-model="user.username">
  age: <input name="age" ng-model="user.age">
</form>

In that example, our submit() method in the controller would have 3 ways of extracting username and age from the form:

Use the $scope.myForm object. This object has also information related to form validation.
Use the $scope.user object.
Use the user variable passed to the submit() method.

So my question is, what is the best practice?

abhim · Accepted Answer · 2017-09-29 10:57:12Z

1

Let's have a look at the 3 approaches:

$scope.myForm should be used for form validation purposes only. I usually disable the submit button by checking $scope.myForm.$invalid.
$scope.user - It would limit the submit function to only use this variable and reduce its reusability. You also have the overhead of typing more - $scope part, for which I'm being pedantic.
I like the third approach more as it increases the reusability of the submit function.

answered Sep 29, 2017 at 10:57

abhim

1,1961 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kalpesh · Accepted Answer · 2017-09-29 10:36:24Z

0

Use the user variable passed to the submit(user) is the best approach to follow.

answered Sep 29, 2017 at 10:36

Kalpesh

632 silver badges11 bronze badges

Comments

Petr Averyanov · Accepted Answer · 2017-09-29 11:20:45Z

Do not use $scope, bind everything to controller instead. This how it should look like:

<form name="$ctrl.myForm" ng-submit="$ctrl.submit()">
  username: <input name="username" ng-model="$ctrl.user.username">
  age: <input name="age" ng-model="$ctrl.user.age">
</form>

Passing $ctrl.user to submit for me makes no sense, but this is more matter of style.

P.S. For simple cases you do not need Form object in controller, thow when things become complicated you will find live without it very difficult. As a live example try to add async validation on some field, that should happen both on blur and form submit (if validation on blur was not finished yet)

Collectives™ on Stack Overflow

form best practices (angularjs 1.6)

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related