feat(ngForm): Supports expressions in form name #3115

Closed
wants to merge 1 commit into
from

Projects

None yet

7 participants

@damrbaby
Contributor
damrbaby commented Jul 2, 2013

Now it is possible to access a form from a controller using the new controller as syntax, without having to access $scope:

Old way:

<div ng-controller="MainCtrl as main">
  <form name="form" ng-submit="main.submit()">
  </form>
</div>

...

.controller('MainCtrl', function($scope) {
  this.submit = function() {
    if $scope.form.$valid {
      // do something!
    }
  }
})

New way:

<div ng-controller="MainCtrl as main">
  <form name="main.form" ng-submit="main.submit()">
  </form>
</div>

...

.controller('MainCtrl', function() {
  this.submit = function() {
    if this.form.$valid {
      // do something!
    }
  }
})
@damrbaby damrbaby feat(ngForm): Supports expression in form names
<form name="ctrl.form"> form controller will accessible
as $scope.ctrl.form instead of $scope['ctrl.form']

BREAKING CHANGE:
If you have form names that will evaluate as an expression:

<form name="ctrl.form">

And if you are accessing the form from your controller:

  Before:

  function($scope) {
    $scope['ctrl.form'] // form controller instance
  }

  After:

  function($scope) {
    $scope.ctrl.form // form controller instance
  }

This makes it possible to access a form from a controller
using the new "controller as" syntax. Supporting the previous
behavior offers no benefit.
2318a15
@jonbcard
Contributor
jonbcard commented Jul 5, 2013

Awesome! This is definitely needed. Very annoying today to need to structure my forms to avoid having them hidden inside child scopes. IMO. dot notation in a form name should be a de facto best practice (just like it is for ng-model).

@cironunes
Member

+1

@thatmarvin

This makes sense. +1

@petebacondarwin
Member

PR Checklist (Minor Feature)

  • Contributor signed CLA now or in the past (if you just signed, leave a comment here with your real name for cross reference)
  • Feature improves existing core functionality
  • API is compatible with existing Angular apis and relevant standards (if applicable)
  • PR doesn't contain a breaking change
  • PR contains unit tests
  • PR contains e2e tests (if suitable)
  • PR contains documentation update
  • PR passes all tests on Travis (sanity)
  • PR passes all tests on ci.angularjs.org (cross-browser compatibility)
  • PR is rebased against recent master
  • PR is squashed into one commit per logical change
  • PR's commit messages are descriptive and allows us to autogenerate release notes (required commit message format)
  • All changes requested in review have been implemented
@damrbaby
Contributor

@petebacondarwin I signed the CLA (name is Matthew Windwer)

What else do you need from me? I can take care of the documentation update as well, if that's necessary.

@btford
Contributor
btford commented Aug 7, 2013

Made a minor change (removed $parse in favor of the more lightweight setter), and landed as 8ea802a.

Thanks!

@btford btford closed this Aug 7, 2013
@damrbaby
Contributor
damrbaby commented Aug 8, 2013

@btford great! Just out of curiosity, where is setter defined?

@Beelal
Beelal commented Aug 19, 2013

Sounds like a great change. I have a question though:

How to call $apply with this new change? this.$apply gives an error. Also, how private function for e.g. privateFunction below can access 'this' objects?

angular.module('demo')
.controller('MainCtrl', function () {
this.demoObject = {};

var privateFunction = function() {
this.demoObject.var1 = ""; // gives an error
}
}

@damrbaby
Contributor

@bilalahmed70 I think you are referring to the "controller as" syntax that was introduced in 1.1.5, as this PR just deals specifically with form names.

Anyway you are correct that you cannot call this.$apply() within a controller... you would still need to inject $scope and call $scope.$apply() if you really needed to do that.

A private function within a controller is going to have a different this unless you bind it to the controller, e.g. var privateFunction = function() { this.demoObject.var1 = "" }.bind(this)

@Beelal
Beelal commented Aug 19, 2013

@damrbaby Yes, I was referring to the "controller as" syntax. I thought this is set to $scope like this 'this = $scope' but I guess that's not the case. I use $scope.$apply as it is required for third party library calls like firebase or parse.

Appreciate your response! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment