CODEWITHSUNDEEP
javascriptangularjs
CaptainMorgan
CaptainMorgan

Reputation: 1253

AngularJS Cannot read property '$setPristine' of undefined

I'm getting the error Cannot read property '$setPristine' of undefined when attempting to reset a form.

My controller:

formApp.controller('FormController', ['$scope', 
    function ($scope) {

        $scope.options = ["Opt1", "Opt2", "Opt3", "Other"];
        $scope.formData = {
            selectedOption: null,
            firstName: "",
            lastName: "",
            email: "",
            phone: "",
            fax: "",
            comments: ""
        };

        var origData = angular.copy($scope.formData);


        $scope.submit = function () {
            // submit code goes here
        };

        $scope.reset = function () {
            $scope.formData = angular.copy(origData);

              //  $scope.financeForm.$setUntouched();
                $scope.financeForm.$setPristine();


        };

        $scope.reset();

    }
]);

My HTML (I've stripped out most fields to keep this minimal):

<form id="financeForm" name="financeForm" ng-submit="financeForm.$valid && submit()" novalidate>
    <md-content layout-padding class="autoScroll">
        <md-input-container flex md-is-error="financeForm.selectedOption.$invalid && (financeForm.$submitted || financeForm.selectedOption.$dirty)">
            <md-select required placeholder="Nature of your Enquiry" ng-model="formData.selectedOption" name="selectedOption" id="selectedOption">
                <md-option ng-repeat="opt in options" value="{{opt}}">{{opt}}</md-option>
            </md-select>
            <div ng-messages="financeForm.selectedOption.$error" ng-if="financeForm.$submitted || financeForm.selectedOption.$touched">
                <div ng-message="required">Please your enquiry option.</div>
            </div>
        </md-input-container>

        <md-input-container>
            <label>Comments</label>
            <textarea ng-model="formData.comments" columns="1" md-maxlength="500"></textarea>
        </md-input-container>
    </md-content>

    <md-button class="md-raised" ng-click="reset();">RESET</md-button>
    <md-button class="md-raised md-primary">SUBMIT</md-button>
</form>

I don't see what I'm doing wrong. Can someone please help?

Upvotes: 0

Views: 6469

Answers (2)

rama k
rama k

Reputation: 1

check for any open function calls which is rendering the page before the form creation which may end-up in " $setPristine is undefined " By using this code you can reset the $dirty , $name ,$untouched , $pristine ,$valid etc ... to their original boolean state. in html code

<md-button ng-click="reset(ExampleForm)">Cancel</md-button>
<md-button type="submit" ng-disabled="ExampleForm.$invalid || !ExampleForm.$dirty">Save</md-button>

In controller

    $scope.reset = function(formName){
        formName.$setPristine();
    };

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22493

$setPristine is undefined because you need to add it as a service to your function at the top

function ($scope,$setPristine){...

That will let the function know what you mean by $setPristine

Also angular JS $setPristine only works in angularjs 1.1.* so check your version.

Upvotes: 1

Related Questions