在AngularJs中按下取消按鈕後無法清除整個表單？

我無法在一些有多個驗證的字段中清除我的表單。任何人都可以幫忙嗎？在AngularJs中按下取消按鈕後無法清除整個表單？

      <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

你可以看到在電子郵件中的數據，手機和手機不被清除

來源

2016-02-05 Raja

嗨看到我的結算方式的數據這一工作代碼。

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>

來源

2016-02-05 12:11:59 Rahul

是啊，這對我來說工作壓力太大，但其驗證不，當你輸入無效數據。無論如何感謝您的幫助 – Raja

在AngularJs中按下取消按鈕後無法清除整個表單？

回答

相關問題