Angularjs $ setPristine non funziona con il controller come sintassi

Question

$ setPristine funziona bene quando si fa riferimento con $ portata, ma non sembra funzionare con 'controllore come la sintassi'

In Vista:

<h2>With Controller as syntax</h2> 
<div ng-controller="FirstCtrl as first"> 
    <form name="form1" id="form" novalidate> 
     <input name="name" ng-model="first.data.name" placeholder="Name" required/> 
     <button class="button" ng-click="first.reset()">Reset</button> 
    </form> 
    <p>Pristine: {{form1.$pristine}}</p> 
    <p> <pre>Errors: {{form.$error | json}}</pre> </p> 
</div> 
<hr> 

<h2>With $scope</h2> 
<div ng-controller="SecondCtrl"> 
    <form name="form1" id="form" novalidate> 
     <input name="name" ng-model="data.name" placeholder="Name" required/> 
     <button class="button" ng-click="reset()">Reset</button> 
    </form> 
    <p>Pristine: {{form1.$pristine}}</p> 
    <p> <pre>Errors: {{form.$error | json}}</pre> </p> 
</div> 

In app.js:

var app = angular.module('plunker', []); 

app.controller('FirstCtrl', function() { 
    'use strict'; 
    var vm = this; 
    vm.data = { "name": ""}; 

    vm.reset = function() { 
     vm.data.name = ""; 
     vm.form1.$setPristine(); 
    } 
}); 

app.controller('SecondCtrl', function($scope) { 
    'use strict'; 
    $scope.data = { "name": ""}; 

    $scope.reset = function() { 
     $scope.data.name = ""; 
     $scope.form1.$setPristine(); 
    } 
}); 

Ecco la plunker: http://plnkr.co/edit/VcgZx3?p=preview

Answer 1

Anche se si utilizza la sintassi controller as, il modulo e altri attributi sono ancora associati all'ambito non all'istanza del controller, quindi è ancora necessario utilizzare $scope.form1.$setPristine(); per impostare lo stato del modulo.

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('FirstCtrl', function($scope) { 
 
    'use strict'; 
 
    var vm = this; 
 
    vm.data = { 
 
    "name": "" 
 
    }; 
 

 
    vm.reset = function() { 
 
    vm.data.name = ""; 
 
    $scope.form1.$setPristine(); 
 
    } 
 
}); 
 

 
app.controller('SecondCtrl', function($scope) { 
 
    'use strict'; 
 
    $scope.data = { 
 
    "name": "" 
 
    }; 
 

 
    $scope.reset = function() { 
 
    $scope.data.name = ""; 
 
    $scope.form1.$setPristine(); 
 
    } 
 
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
 

 
<div ng-app="my-app"> 
 
    <h2>With Controller as syntax</h2> 
 
    <div ng-controller="FirstCtrl as first"> 
 
    <form name="form1" id="form" novalidate> 
 
     <input name="name" ng-model="first.data.name" placeholder="Name" required/> 
 
     <button class="button" ng-click="first.reset()">Reset</button> 
 
    </form> 
 
    <p>Pristine: {{form1.$pristine}}</p> 
 
    <p> <pre>Errors: {{form.$error | json}}</pre> </p> 
 
</div> 
 
<hr/> 
 

 
<h2>With $scope</h2> 
 
<div ng-controller="SecondCtrl"> 
 
    <form name="form1" id="form" novalidate> 
 
    <input name="name" ng-model="data.name" placeholder="Name" required/> 
 
    <button class="button" ng-click="reset()">Reset</button> 
 
    </form> 
 
    <p>Pristine: {{form1.$pristine}}</p> 
 
    <p> <pre>Errors: {{form.$error | json}}</pre> </p> 
 
</div> 
 
</div>

Answer 2

Un'alternativa all'uso suggerimento di Arun di accesso al modulo attraverso $scope è semplicemente quello di garantire la forma è accessibile attraverso il regolatore.

Per fare tutto ciò è sufficiente modificare leggermente il codice HTML per la versione 'controller as'. Cambiare il nome del modulo per includere l'oggetto di controllo, anche cambiare tutti i riferimenti al modulo dal modello per includere la variabile di controllo:

<h2>With Controller as syntax</h2> 
<div ng-controller="FirstCtrl as first"> 
    <form name="first.form1" id="form" novalidate> 
     <input name="name" ng-model="first.data.name" placeholder="Name" required/> 
     <button class="button" ng-click="first.reset()">Reset</button> 
    </form> 
    <p>Pristine: {{first.form1.$pristine}}</p> 
    <p> <pre>Errors: {{form.$error | json}}</pre> </p> 
</div> 
<hr> 

Javascript verrà eseguito invariato.

Answer 3

Credo un modo ancora più semplice per ottenere questo risultato è di fornire il controllore modulo come parametro per la funzione reset():

… 
<button class="button" ng-click="reset(form1)">Reset</button> 
… 

e modificare la funzione reset() leggermente, in modo che utilizzi il parametro fornito:

$scope.reset = function(form) { 
    $scope.data.name = ""; 
    form.$setPristine(); 
} 

Answer 4

È possibile utilizzare $ setPristine senza $ portata:

<form ng-submit="$ctrl.save()" name="$ctrl.myForm"> 

E nel controller:

var $ctrl = this; 
... 
$ctrl.myForm.$setPristine(); 
$ctrl.myForm.$setUntouched(); 

funziona per me. (AngularJS v1.5.7)