angularjs 2形成一个页面,一个起作用,另一个起作用

时间:2017-06-13 16:56:50

标签: javascript angularjs

我不知道我在这里做了什么。 我有这个观点:

<div class="row" ng-if="!controller.showLoginForm">
    <div class="col-md-4 col-md-offset-4">
        <form name="registerForm" ng-submit="controller.register(registerForm.$valid)" novalidate>
            <div class="form-group" ng-class="{ 'has-error': registerForm.email.$invalid && !registerForm.email.$pristine }">
                <label class="control-label">Email</label>
                <input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
                <p ng-show="registerForm.email.$invalid && !registerForm.email.$pristine" class="help-block">Enter a valid email address.</p>
            </div>
            <div class="form-group">
                <button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
                <button class="btn btn-primary pull-right" type="submit" ng-disabled="registerForm.$invalid">Register</button>
            </div>
        </form>

        <pre>{{ controller.model | json }}</pre>
    </div>
</div>

<div class="row" ng-if="controller.showLoginForm">
    <div class="col-md-4 col-md-offset-4">
        <form name="form" ng-submit="controller.login(form.$valid)" novalidate>
            <div class="form-group" ng-class="{ 'has-error': form.email.$invalid && !form.email.$pristine }">
                <label class="control-label">Email</label>
                <input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
                <p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email address.</p>
            </div>
            <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.password.$pristine }">
                <label class="control-label">Password</label>
                <input class="form-control" name="password" type="password" ng-model="controller.model.password" ng-minlength="8" required />
                <p ng-show="form.password.$error.minlength" class="help-block">Password is too short.</p>
            </div>
            <div class="form-group">
                <button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
                <button class="btn btn-primary pull-right" type="submit" ng-disabled="form.$invalid">Login</button>
            </div>
        </form>

        <pre>{{ controller.model | json }}</pre>
    </div>
</div>

这个问题是登录表单工作正常....验证和所有...但注册表格根本不起作用。 ng-submit 什么都不做, ng-class fire和 ng-disabled 都不起作用。

控制器如下所示:

(function () {
    'use strict';

    angular.module('widget.directives').controller('PkAuthenticateController', PkAuthenticateController);

    PkAuthenticateController.$inject = ['pkAuthenticateService'];

    function PkAuthenticateController(pkAuthenticateService) {
        var self = this;

        // Bindings
        self.model = { email: '' };
        self.showLoginForm = pkAuthenticateService.hasLogin;

        // Method binding
        self.register = register;
        self.login = login;

        //////////////////////////////////////////////////

        function register(valid) {
            if (valid) {
                return pkAuthenticateService.register(self.model);
            }
        };

        function login(valid) {
            if (valid) {
                return pkAuthenticateService.login(self.model);
            }
        };
    };
})();

有人能发现我做错了吗?

0 个答案:

没有答案