角度重置形式不起作用

时间:2016-04-20 20:39:14

标签: angularjs twitter-bootstrap

我正在开发一个应用程序,我正在使用bootstrap和angular。使用angular和bootstrap进行表单验证工作正常,但我有一个问题需要重置表单。我叫$ setPristine()但它似乎没有做任何事情。

这是我的HTML。

 <div class="cl-xs-12" style="margin-top:20px">
<div class="col-xs-3"></div>
<div ng-controller="AddUpdateUserController" class="col-xs-6">
    <form class="form-horizontal" role="form" id="addEditMemberForm" name="addEditMemberForm" ng-submit="addUpdateMember(member)" novalidate>
        <input type="hidden" id="mmeberId", name="memberId" ng-model="member.id">
        <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.firstName.$invalid && addEditMemberForm.firstName.$dirty}">
            <label for="firstName" class="control-label col-xs-4">First Name</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" ng-model="member.firstName" ng-pattern="/^[0-9A-Za-z]+$/" required>
                <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.firstName.$touched" ng-messages="addEditMemberForm.firstName.$error">
                    <div ng-show="addEditMemberForm.firstName.$error.required" class="validationErrorMessage">First Name is required</div>
                    <div class="validationErrorMessage" ng-message="pattern">First name is invalid. Only Alphanumeric characters are allowed</div>
                </div>
            </div>
        </div>
        <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.middleName.$invalid && addEditMemberForm.middleName.$dirty}">
            <label for="lastName" class="control-label col-xs-4">Middle Name</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="middleName" name="middleName" placeholder="Middle Name" ng-model="member.middleName" ng-pattern="/^[0-9A-Za-z]+$/" required>
                <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.middleName.$touched" ng-messages="addEditMemberForm.middleName.$error">
                    <div class="validationErrorMessage" ng-message="required">Middle name is required.</div>
                    <div class="validationErrorMessage" ng-message="pattern">Middle name is invalid. . Only Alphanumeric characters are allowed</div>
                </div>
            </div>
        </div>
        <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.lastName.$invalid && addEditMemberForm.lastName.$dirty}">
            <label for="lastName" class="control-label col-xs-4">Last Name</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" ng-model="member.lastName" ng-pattern="/^[0-9A-Za-z]+$/" required>
                <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.lastName.$touched" ng-messages="addEditMemberForm.lastName.$error">
                    <div ng-show="addEditMemberForm.lastName.$error.required" class="validationErrorMessage">Last Name is required</div>
                    <div class="validationErrorMessage" ng-message="pattern">Last name is invalid. . Only Alphanumeric characters are allowed</div>
                </div>
            </div>
        </div>

    </form>
    <div class="row">
        <label>{{message}}</label>
    </div>
    <label ng-model="status"></label>
</div>
<div class="col-xs-3"></div>
</div>

这是我的Javascript:

angular.module('SiteControllerModule').controller('AddUpdateUserController', ['$scope', '$http', '$location', function($scope, $http, $location){     
    $scope.resetForm = function () {            
        $scope.member = null;
        $scope.addEditMemberForm.$setPristine();            
    }
}]);

当调用$ setPristine时,我的表单仍然很脏,看起来它留下了我的Bootstrap验证错误。

Form Still Dirty

任何与此相关的帮助都表示赞赏。

由于

1 个答案:

答案 0 :(得分:1)

试试这个:

$scope.addEditMemberForm.$setPristine();
$scope.addEditMemberForm.$setUntouched();