Question

我正在MEAN STACK中开发项目，我想重置我的表单和模型的变量我可以重置验证但是当字段值为脏时，表单字段的值不能重置意味着无效验证当字段没有任何错误时，该字段将被正确重置。

Signup.html

<div class="tabs-frame-content tab_content" id="tab2" ng-controller="SignupCtrl">
<div id="user_signup">
    <form name="frmSignup" id="frmSignup" ng-submit="doRegistration(frmSignupSubmitted && frmSignup.$valid)" autocomplete="off" novalidate="">
        <div class="content">
            <label class="formlabel1">Fullname</label>
            <input type="text" name="txtFullname" id="txtFullname" class="inputbox inputbox_width" ng-model="user.txtFullname" required="">
            <div class="error_msg" ng-show="(frmSignup.txtFullname.$touched || frmSignupSubmitted) && frmSignup.txtFullname.$error.required">Fullname is required</div>

            <label class="formlabel1">Nickname</label>
            <input type="text" name="txtNickname" id="txtNickname" class="inputbox inputbox_width" ng-model="user.txtNickname" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" required="" hz-unique-nick-name>
            <div class="error_msg" ng-show="(frmSignup.txtNickname.$touched || frmSignupSubmitted) && frmSignup.txtNickname.$error.required">Nickname is required</div>
            <div class="error_msg" ng-show="!frmSignup.txtNickname.$error.nick_name && !frmSignup.txtNickname.$error.required && frmSignup.txtNickname.$error.hzUniqueNickName && !frmSignup.txtNickname.$error.pattern">NickName has already been taken</div>
            <div class="error_msg" ng-show="(frmSignup.txtNickname.$touched || frmSignupSubmitted) && frmSignup.txtNickname.$error.pattern">Nickname must be alphanumeric</div>

            <label class="formlabel1">Email</label>
            <input type="email" name="txtEmail" id="txtEmail" class="inputbox inputbox_width" ng-model="user.txtEmail" required="" ng-email="" hz-unique-email="">
            <div class="error_msg" ng-show="(frmSignup.txtEmail.$touched || frmSignupSubmitted) && frmSignup.txtEmail.$error.required">Email is required</div>
            <div class="error_msg" ng-show="(frmSignup.txtEmail.$touched || frmSignupSubmitted) && frmSignup.txtEmail.$error.email">Email is invalid</div>
            <div class="error_msg" ng-show="!frmSignup.txtEmail.$error.email && !frmSignup.txtEmail.$error.required && frmSignup.txtEmail.$error.hzUniqueEmail">Email has already been taken</div>

            <label class="formlabel1">Password</label>
            <input type="text" name="txtPassword" id="txtPassword" class="inputbox inputbox_width" ng-model="user.txtPassword" required="" ng-pattern="/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,})$/">
            <div class="error_msg" ng-show="(frmSignup.txtPassword.$touched || frmSignupSubmitted) && frmSignup.txtPassword.$error.required">Password is required</div>
            <div class="error_msg" ng-show="(frmSignup.txtPassword.$touched || frmSignupSubmitted) && frmSignup.txtPassword.$error.pattern">8 Characters or longer and contain at least one number(0-9), one uppercase(A-Z), one smallcase (a-z), one digit (0-9) and one symbol (?=.*[@#$%])</div>

            <label class="formlabel1">Confirm password</label>
            <input type="text" name="txtConfirmPassword" id="txtConfirmPassword" class="inputbox inputbox_width" ng-model="user.txtConfirmPassword" required="" hz-compare-password="frmSignup.txtPassword">
            <div class="error_msg" ng-show="(frmSignup.txtConfirmPassword.$touched || frmSignupSubmitted) && frmSignup.txtConfirmPassword.$error.required">Confirm password is required</div>
            <div class="error_msg" ng-show="(frmSignup.txtConfirmPassword.$touched || frmSignupSubmitted) && (frmSignup.txtConfirmPassword.$error.hzComparePassword && !frmSignup.txtConfirmPassword.$error.required)">Confirm password must same as password</div>
        </div>
        <div class="actions button-groups login-button-space">
            <input type="button" value="Reset" name="btnCancelSignup" id="btnCancelSignup" class="popup-modal-dismiss submit-btn button pull-right sp1" ng-model="user.btnCancel" ng-click="Reset()">
            <input type="submit" value="Submit" class="submit-btn button pull-right sp1" ng-click="frmSignupSubmitted = true" />
            <div class="clearfix"></div>
        </div>
    </form>
</div>

signupController.js

(function () {
'use strict'
function SignupCtrl($scope, $location, $rootScope, $window, $timeout, UserService, notifications) {

    $scope.Reset = function(){
        $scope.user= angular.copy({});
        $scope.frmSignup.$setPristine();
        $scope.frmSignup.$setUntouched();
        $scope.frmSignupSubmitted = false;
        //reset active tab
        //for close magnific popup
        $.magnificPopup.instance.close();
    };
}

angular
     .module('AppWhizbite')
     .controller('SignupCtrl', [SignupCtrl]);
}());

问题

Error : When email entered *laxmantest* in email field ,click on reset button validation reseted but models $scope.user.txtEmail will not rest and it will stay displayed in email field.

Work proper : When email entered *laxmantest@mailinator.com* in email field ,click on reset button all works fine.

任何人都可以帮我解决这个问题。

Angularjs - 重置表单字段，模型和验证

0 个答案: