angularjs在验证确认消息时启用提交按钮

时间:2016-06-24 13:34:33

标签: javascript angularjs

我有以下注册页面

<div class="col-md-6 col-md-offset-3">
    <h2>Add New User</h2>
    <form name="form" ng-submit="vm.register()" role="form">
        <div class="form-group"
            ng-class="{ 'has-error': form.type.$dirty && form.type.$error.required }">
            <label for="type">User Type</label>
            <md-radio-group ng-init="vm.user.type=0" ng-model="vm.user.type" required> 
                <md-radio-button value="0" class="md-primary">Back Office</md-radio-button> 
                <md-radio-button value="1" class="md-primary md-hue-1"> Mobile </md-radio-button> 
                <md-radio-button value="2" class="md-primary md-hue-2">Client</md-radio-button> 
            </md-radio-group>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.firstname.$dirty && form.firstname.$error.required }">
            <label for="firstname">First name</label> 
            <input type="text" name="firstname" id="firstname" class="form-control" ng-model="vm.user.firstname" required /> 
            <span ng-show="form.firstname.$dirty && form.firstname.$error.required" class="help-block">First name is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
            <label for="lastname">Last name</label> 
            <input type="text" name="lastname" id="Text1" class="form-control" ng-model="vm.user.lastname" required /> 
            <span ng-show="form.lastname.$dirty && form.lastname.$error.required" class="help-block">Last name is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
            <label for="company">Company</label> 
            <input type="text" name="company" id="Text2" class="form-control" ng-model="vm.user.company" required /> 
            <span ng-show="form.company.$dirty && form.company.$error.required" class="help-block">Company is required</span>
        </div>

        <div class="form-group" ng-class="{ 'has-error': form.Email.$dirty && form.Email.$error.required }">
            <label for="email">Email</label> 
            <input type="text" name="email" id="Text2" class="form-control" ng-model="vm.user.email" ng-pattern="/\s?^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/i" required />
            <span ng-show="form.email.$dirty && form.email.$error.required"
                class="help-block">Email is required</span> 
                <span class="help-block" ng-show="form.email.$dirty && form.email.$error.pattern"> Not  valid email! </span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
            <label for="username">Username</label> 
            <input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required /> 
            <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
            <label for="password">Password</label> 
            <input type="password" name="password" id="password" class="form-control" ng-model="vm.user.password" required /> 
            <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.confirmpassword.$dirty && form.confirmpassword.$error.required }">
            <label for="confirmpassword">Confirm Password</label> 
            <input type="password" name="confirmpassword" id="confirmpassword" class="form-control" ng-model="vm.user.confirmpassword" valid-password-c required /> 
            <span ng-show="form.confirmpassword.$dirty && form.confirmpassword.$error.required" class="help-block">Confirm Password is required</span>
            <span ng-show="!form.confirmpassword.$error.required && form.confirmpassword.$error.noMatch && form.confirmpassword.$dirty" class="help-block">Passwords do not match.</span>
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="form.$invalid"   class="btn btn-primary">Register</button>
            <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            <a href="#/login" class="btn btn-link">Cancel</a>
        </div>
    </form>
</div>

我有两个问题 1-即使填写了所有字段,注册按钮也始终处于禁用状态。 2-确认密码验证期间 如果我填写密码然后用相同的值填写确认密码,那么每件事情都会好,但是如果我再次修改了我的密码,页面将不会显示两个密码不匹配

0 个答案:

没有答案