角1.5組件使用表單和$ setPristine

Question

我想在角1.5

使用表單組件內我有形式的工作，在我的模型結合，並能得到對提交的數據。所以我90％都是我想要的，缺少的是能夠使用$ setPristine正確重置表單。

我已經嘗試了幾種方法，第一種方法是將表單作爲參數傳遞給重置函數。

form.html

<form name="$ctrl.userForm"> 
    ... 
    <input class="btn btn-default" type="button" ng-click="$ctrl.reset($ctrl.userForm)" value="Reset" /> 
</form> 

form.component.js

ctrl.reset = function(userForm) { 
    ctrl.user = {}; 
    userForm.$setPristine // Cannot read property '$setPristine' of undefined 
}; 

Full code in Plnkr

我也試過聲明$ ctrl.userForm爲空對象$ OnInit的，但沒」 t似乎也工作。使用$ setPristine行刪除重置工作清除表單數據，但不是從角度角度來看它的狀態。

關於我失蹤的任何想法？

Answer 1

從你的plunkr你有整個組件聲明波紋管。

function formController() { 
    var ctrl = this; 
    ... 

    ctrl.reset = function(userForm) { 
    ctrl.user = {}; 
    userForm.$setPristine 
    }; 

    ctrl.reset(); 
} 

錯誤源於此行ctrl.reset();，你調用該方法，而不發送參數userForm。此外，您正在以錯誤的方式使用$setPristine，您也無需將表單作爲參數傳遞。

我sugest你使用申報控制器上像這樣的形式：

angular 
    .module('application') 
    .component('mkForm', { 
    templateUrl: 'form.html', 
    controller: formController 
    }); 

function formController() { 
    var ctrl = this; 
    ctrl.master = {}; 

    ctrl.update = function(user) { 
    ctrl.master = angular.copy(user); 
    }; 

    ctrl.reset = function() { 
    ctrl.user = {}; 
    ctrl.userForm.$setPristine(); 
    }; 
} 

注：你不必調用ctrl.reset();，因爲原始狀態是默認狀態。