AngularJS完全重置表格

我有一個很大的表單，它在客戶端被Angular驗證。我想弄清楚如何重置窗體的狀態和它的輸入，只需點擊一個重置按鈕。AngularJS完全重置表格

我試過$setPristine()表單上，但它並沒有真正的工作，這意味着它不會清除ng-*類來重置窗體到它的原始狀態，沒有驗證執行。

這裏是我的形式的短版：

<form id="create" name="create" ng-submit="submitCreateForm()" class="form-horizontal" novalidate> 
    <div class="form-group"> 
     <label for="name" class="col-md-3 control-label">Name</label> 
     <div class="col-md-9"> 
      <input required type="text" ng-model="project.name" name="name" class="form-control"> 
      <div ng-show="create.$submitted || create.name.$touched"> 
       <span class="help-block" ng-show="create.name.$error.required">Name is required</span> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="lastName" class="col-md-3 control-label">Last name</label> 
     <div class="col-md-9"> 
      <input required type="text" ng-model="project.lastName" name="lastName" class="form-control"> 
      <div ng-show="create.$submitted || create.lastName.$touched"> 
       <span class="help-block" ng-show="create.lastName.$error.required">Last name is required</span> 
      </div> 
     </div> 
    </div> 
    <button type="button" class="btn btn-default" ng-click="resetProject()">Reset</button> 
</form>

我的復位功能：

$scope.resetProject = function() { 
    $scope.project = { 
     state: "finished", 
     topic: "Home automation" 
    }; 
    $("#create input[type='email']").val(''); 
    $("#create input[type='date']").val(''); 
    $scope.selectedState = $scope.project.state; 
    // $scope.create.$setPristine(); // doesn't work 
}

此外，如果你能幫助我明確的電子郵件和日期字段的輸入值，而無需使用jQuery會很好。因爲將$scope.project設置爲上面定義的內容不會因某些原因重置字段。

來源

2015-12-07 dabadaba

什麼是「真的沒有工作」是什麼意思？ – Wawy

此外它會是有用的獲得顯示您的問題的plnkr。 – Wawy

它不清除'ng- *'類來將表單重置爲其原始狀態而未執行驗證 – dabadaba

正如評論所說，你可以使用$setUntouched();

https://docs.angularjs.org/api/ng/type/form.FormController# $ setUntouched

這應該設置形式返回到它的新狀態。

因此，在這種情況下$scope.create.$setUntouched();應該做的伎倆

參考所有的jQuery。你不應該通過控制器與DOM交互。這就是該指令是

如果要重置某一個屬性，然後像做：

$scope.resetProject = function() { 
    $scope.project = { 
     state: "finished", 
     topic: "Home automation" 
    }; 
    $scope.project.lastName = ''; 
    $scope.project.date= ''; 
}

來源

2015-12-07 16:47:53 Darren

嘗試清除通過NG-模型

$scope.resetProject = function() { 
    $scope.project = { 
     state: "finished", 
     topic: "Home automation" 
    }; 
    $("#create input[type='email']").val(''); 
    $("#create input[type='date']").val(''); 
    $scope.selectedState = $scope.project.state; 

    $scope.project = { 
     name: "", 
     lastName: "" 
    }; 
}

來源

2015-12-07 16:46:24 madrick

AngularJS完全重置表格

回答

相關問題