Question

我无法在一些有多个验证的字段中清除我的表单。有人请帮忙吗？

                            <div class="col-lg-4 col-md-6">
                                <div class="form-group" data-ng-class="{ 'has-error' : vm.form.phonenumber.$invalid && (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)}">
                                    <label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _phoneNumber_"></label>
                                    <div class="col-md-8 col-sm-8 col-xs-10">
                                        <input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.phoneNumber" required name="phonenumber" ng-pattern="/^[0-9]{10}$/" />
                                        <span data-ng-show="vm.form.phonenumber.$error.required && (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)" class="help-block" data-i18n="_phoneNumrequired_"></span>
                                        <span class="help-block" data-ng-show="vm.form.phonenumber.$error.pattern && vm.form.phonenumber.$dirty" data-i18n="_phoneNuminvalid_"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="form-group" data-ng-class="{ 'has-error' : vm.form.mobilenumber.$invalid && (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)}">
                                    <label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _mobileNumber_"></label>
                                    <div class="col-md-8 col-sm-8 col-xs-10">
                                        <input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.mobileNumber" required name="mobilenumber" ng-pattern="/^[0-9]{10}$/" />
                                        <span data-ng-show="vm.form.mobilenumber.$error.required && (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)" class="help-block" data-i18n="_mobileNumrequired_"></span>
                                        <span class="help-block" data-ng-show="vm.form.mobilenumber.$error.pattern && vm.form.mobilenumber.$dirty" data-i18n="_mobileNuminvalid_"></span>
                                    </div>
                                </div>
                            </div>`

角度函数：

function cancel() { vm.person = angular.copy(vm.original); vm.form.$setPristine(); vm.form.$setUntouched(); }

this is before pressing cancel

this is after cancelling

您可以看到电子邮件，手机和手机中的数据未被清除

Answer 1

嗨请参阅此工作代码，我将清除表单数据。

migth这将有助于

代码是

    //module declaration
    var app = angular.module('myApp', []);
    //Controller declaration
    app.controller('myCtrl', function($scope) {
      $scope.person = {
        firstName: "John",
        lastName: "Doe"
      };

      var oriPerson = angular.copy($scope.person);

      $scope.resetForm = function() {
        $scope.person = angular.copy(oriPerson);
        $scope.personForm.$setPristine();
      };

      $scope.clearForm = function() {
        $scope.person = {};
      }

      $scope.isPersonChanged = function() {
        return !angular.equals($scope.person, oriPerson);
      };
    });

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
 <form name="personForm" novalidate>
    <label for="firstNameEdit">First name:</label>
    <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
    <br />
    <label for="lastNameEdit">Last name:</label>
    <input id="lastNameEdit" type="text" name="lastName" ng-model="person.lastName" required />
    <br />
    <br />
    <button type="button" ng-click="resetForm()" ng-disabled="!isPersonChanged()">Reset</button>
    <button type="button" ng-click="clearForm()">clear</button>
  </form>
</body>
<html>

在AngularJs中按取消按钮后无法清除整个表格？

1 个答案: