dart-archive / angular.dart

Legacy source repository. See github.com/dart-lang/angular
https://webdev.dartlang.org/angular/
1.25k stars 248 forks source link

Ngform instance is not bound when name attribute value is hyphenated AngularDart 1.1.0 #1730

Open metatron-the-chronicler opened 9 years ago

metatron-the-chronicler commented 9 years ago

Given a form like the following:

<form name="login-form" novalidate ng-submit="login()">
    <div class="row">
        <div class="small-8 columns">
            <div class="row">
                <div class="small-3 columns">
                    <label for="username" class="right">Username:</label>
                </div>
                <div class="small-9 columns">
                    <input type="text" id="username"/>
                </div>
            </div>
            <div class="row">
                <div class="small-3 columns">
                    <label for="password" class="right">Password:</label>
                </div>
                <div class="small-8 columns">
                    <input type="password" id="password"/>
                </div>
            </div>
        </div>
        <div class="small-4 columns">
            <div class="row">
                <div class="small-6">
                    <button id="login-button">Login</button>
                    <button id="cancel-button">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</form>

and a component like the following:

@Component(selector: 'login', templateUrl: 'login.html')
class LoginComponent extends CommonFields implements ScopeAware {
  final LoginService _loginService;
  @NgTwoWay('login-form')
  NgForm loginForm;
  Router router;
  LoginComponent(this._loginService);

  void clear() {
    loginForm.username = null;
    loginForm.password = null;
  }

  bool login() {
    return _loginService.login(loginForm.username, loginForm.password);
  }

  void set scope(Scope scope) {
    scope.on('login').listen((event) {
      event.preventDefault();
      router.go('login');
    });
  }
}

I receive the following error:

There must be a "(login-form)" field on your component to store the form instance.

Stacktrace:

   STACKTRACE:
    There must be a "(login-form)" field on your component to store the form instance.
        at dart.wrapException (http://localhost:14207/main.dart.js:2991:15)
        at NgForm.dart.NgForm.set$name (http://localhost:14207/main.dart.js:13944:19)
        at J.set$name$x (http://localhost:14207/main.dart.js:39456:39)
       at closure56.dart.closure56.call$2 (http://localhost:14207/main.dart.js:20097:9)
       at    ClosureMapLocalsAware_lookupSetter_closure.dart.ClosureMapLocalsAware_lookupSetter_closure.call$2 (http://localhost:14207/main.dart.js:9974:77)
        at AccessScopeFast.dart.AccessScopeFast.setter$2    (http://localhost:14207/main.dart.js:10209:26)
        at AccessScopeFast.dart.AccessFast._assign$3 (http://localhost:14207/main.dart.js:10274:21)
        at AccessScopeFast.dart.AccessScopeFast.assign$2 (http://localhost:14207/main.dart.js:10200:19)
        at _UnwrapExceptionDecorator.dart._UnwrapExceptionDecorator.assign$2 (http://localhost:14207/main.dart.js:9829:31)
       at J.assign$2$x (http://localhost:14207/main.dart.js:38889:39)

Changing the name attribute on the form and the NgTwoWay attribute on the component to loginForm seems to work in so far as the component will at least load. However legal hyphenated names in the html should be properly detected by AngularDart.