AngularJS $ setPristine वाक्य रचना के रूप में नियंत्रक के साथ काम नहीं कर रहा

Question

$ setPristine ठीक काम करता है जब $ गुंजाइश के साथ संदर्भित लेकिन

देखें में 'वाक्य रचना के रूप में नियंत्रक' के साथ काम करने के लिए प्रतीत नहीं होता:

<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> 

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

यहाँ plunker है: http://plnkr.co/edit/VcgZx3?p=preview

Answer 1

भले ही आप controller as सिंटैक्स का उपयोग करते हैं, फिर भी फॉर्म और अन्य विशेषताएं अभी भी नियंत्रक उदाहरण के दायरे से बंधी हुई हैं, इसलिए आपको अभी भी फॉर्म की स्थिति सेट करने के लिए $scope.form1.$setPristine(); का उपयोग करना होगा।

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

$scope के माध्यम से फार्म तक पहुँचने का अरुण के सुझाव का उपयोग कर के लिए एक वैकल्पिक सुनिश्चित करने के लिए प्रपत्र नियंत्रक के माध्यम से पहुँचा जा सकता है बस है।

ऐसा करने के लिए आपको बस इतना करना है कि 'एचटीएमएल के रूप में' नियंत्रक के लिए अपना HTML बदलें। प्रपत्र का नाम बदल सकते नियंत्रक वस्तु शामिल करने के लिए, यह भी टेम्पलेट से विधि में कोई भी संदर्भ बदलना नियंत्रक चर शामिल करने के लिए:

<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> 

आपका जावास्क्रिप्ट अब अपरिवर्तित चलेंगे।

Answer 3

मुझे लगता है कि एक और भी आसान तरीका यह है, reset() कार्य करने के लिए एक पैरामीटर के रूप प्रपत्र नियंत्रक प्रदान करना है: थोड़ा

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

और बदल reset() समारोह, इतना है कि यह आपूर्ति पैरामीटर का उपयोग करता:

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

Answer 4

आप $ गुंजाइश बिना $ setPristine उपयोग कर सकते हैं:

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

और अपने नियंत्रक में:

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

यह मेरे लिए काम करता है। (कोणीयजेएस v1.5.7)