CODEWITHSUNDEEP
angularjsangular-material
Rishabh Jain
Rishabh Jain

Reputation: 536

$setPristine() not working in angular material form

I am making a simple form in angular material to add a post , i also have a cancel button to clear the form . I tried using $setPristine() but still input field shows red after calling clearForm function . I followed some of the answers here but that did not solve my issue . here is my index.html and app.js

<form id="addForm" name="myForm">
                <fieldset id="addField">
                    <legend id="addFormLegend">Create Post</legend>
                    <md-input-container class="md-block">

                        <md-icon md-svg-src="name.svg"></md-icon>
                        <input ng-model="post.name" type="text" placeholder="Name" ng-required="true">
                    </md-input-container>
                    <md-input-container class="md-block">

                        <md-icon md-svg-src="desc.svg"></md-icon>
                        <input ng-model="post.desc" type="text" placeholder="Description" ng-required="true">
                    </md-input-container>
                    <md-input-container class="md-block">

                        <md-icon md-svg-src="link.svg"></md-icon>
                        <input ng-model="post.url" type="url" placeholder="Url " ng-required="true">
                    </md-input-container>
                    <md-button ng-click="clearForm()" class="md-raised md-primary" id="cancelButton"> Cancel </md-button>
                    <md-button ng-click="createPost(post)" class="md-raised md-primary" ng-disabled="myForm.$invalid" id="addButton"> Add Post </md-button>
                </fieldset>

            </form>

app.controller('mainCtrl', ['$scope', '$firebaseArray', 'posts', function ($scope, $firebaseArray, posts) {
        $scope.posts = posts;
        $scope.showForm = false;
        var defaultForm = {
            name: "",
            desc: "",
            url: ""
        };
        $scope.demo = {};
        $scope.post = angular.copy(defaultForm);

        $scope.createPost = function (post) {
            $scope.posts.$add({
                name: post.name,
                desc: post.desc,
                url: post.url
            });
            $scope.post = {};
        };
        $scope.showAddForm = function () {
            $scope.showForm = true;
        };
        $scope.clearForm = function () {
            // $scope.showForm = false;
            $scope.myForm.$setPristine();
            $scope.post = angular.copy(defaultForm);
            console.log('empty');


        }
    }]);

Upvotes: 5

Views: 2125

Answers (2)

Rishabh Jain
Rishabh Jain

Reputation: 536

Actually i went through many answers , but none were working . Then i did add these lines in my app.js

 $scope.clearForm = function () {
            $scope.showForm = false;
            $scope.myForm.$setPristine();
            $scope.myForm.$setUntouched();
            $scope.post = {};
 }

so basically adding $scope.myForm.$setUntouched(); after the $setPristine() worked for me .

Upvotes: 5

Frank Adrian
Frank Adrian

Reputation: 1234

Try creating a porperty on the scope in the controller, eg $scope.form = null; then you change the name of your form to form.myForm. Then you should be able to call $scope.form.myForm.$setPrestine() from the controller.

This is because a form creates its own scope and is not directly added to the controllers scope.

But now you are creating a property form to which the form controller gets assigned which again is accessible form the controller in turn.

Upvotes: 0

Related Questions