Angular 1.5 Komponenten mit Form und $ setPristine

Question

Ich versuche, eine Form innerhalb einer Komponente zu verwenden, in Angular 1,5

ich das Formular Arbeits habe, dass ich Modell verbindlich und kann anschließend auf die Daten erhalten. Ich bin also zu 90% dort, wo ich sein möchte. Was fehlt, ist das korrekte Zurücksetzen des Formulars mit $ setPristine.

Ich habe versucht, ein paar Ansätze der erste in der Form als Argument für die Reset-Funktion übergeben wurde.

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

Ich habe auch versucht $ ctrl.userForm als leeres Objekt $ onInit erklärt, aber das didn‘ Es scheint auch zu funktionieren. Wenn die $ setPristine-Zeile entfernt wurde, funktioniert das Zurücksetzen beim Löschen der Formulardaten, aber nicht im Hinblick auf den Winkel.

Irgendwelche Ideen zu was ich vermisse?

Answer 1

Von Ihrem Plunkr haben Sie die gesamte Komponente unten deklariert.

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

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

    ctrl.reset(); 
} 

Der Fehler wird von dieser Linie stammt ctrl.reset();, wo Sie die Methode aufrufen, ohne userForm das Argument zu senden. Außerdem verwenden Sie $setPristine in der falschen Weise, und Sie müssen das Formular auch nicht als Argument übergeben.

ich sugest Sie das Formular auf Ihrem Controller wie so erklärt zu verwenden:

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(); 
    }; 
} 

Hinweis: Sie nicht ctrl.reset(); zu nennen, weil der ursprüngliche Zustand der Standardzustand ist.