current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

When I try to use form.$setPristine from TypeScript, it doesn't work and the debug says form is undefined. According to what I read, $scope.formName.$setPristine() shall set the form to pristine. To access $scope.formName from the controller, I added it to my custom scope interface as an ng.IFormController property. However, when I call $scope.form.$setPristine(), it doesn't work, and debug shows $scope.form is undefined.

TypeScript:

interface IMyScope extends ng.IScope {
    employees: Array<IEmployee>;
    employeeToAdd: IEmployee;
    addEmployee(): void;
    form: ng.IFormController;
}

class EmployeeAddController {
    static $inject = ['$scope', 'Employees'];

    constructor(
        $scope: IMyScope,
        $modalInstance: ng.ui.bootstrap.IModalServiceInstance,  
        Employees: IUpdateableResourceClass<IUpdateableResource>
    ) {
        $scope.employees = new Array<IEmployee>();

        $scope.employeeToAdd = {
            Name: '',
            Email: ''
        };

        $scope.addEmployee = function () {
            Employees.save(null, $scope.employeeToAdd, function (employee: IEmployee) {
                $scope.employees.push(employee);
                $scope.employeeToAdd.Email = '';
            $scope.employeeToAdd.Name = '';
                $scope.form.$setPristine(); // $scope.form is undefined
            });
        };
    }
}

HTML:

<form role="form" class="form-inline" name="form">
    <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$invalid }">
        <input type="text" class="form-control" ng-model="employeeToAdd.Name" name="name" required>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$invalid }">
        <input type="email" class="form-control" ng-model="employeeToAdd.Email" name="email" required>
    </div>
    <button type="button" class="btn btn-default" ng-click="addEmployee()" ng-disabled="form.$invalid">Add</button>
</form>
share|improve this question
2  
Could be that your form is on a child scope. Set a breakpoint in a debugger (like Chrome's Dev Tools) in the addEmployee function and navigate through $scope and its children to find out! –  stevuu Apr 27 at 12:02

2 Answers 2

up vote 1 down vote

Although Sobieck00's solution works as well, thanks to stevuu's suggestion, I have debugged it and found a way to do it without having to pass the form reference. form can be accessed as $scope.$$childTail.form:

interface IMyScope extends ng.IScope {
    employees: Array<IEmployee>;
    employeeToAdd: IEmployee;
    addEmployee(): void;
    $$childTail: any; // Add this to access $$childTail in current scope
}

Then in $scope.addEmployee() reset it with:

$scope.$$childTail.form.$setPristine();
share|improve this answer
    
Prefer the other solution as you are telling your controller too much about the view here –  basarat Apr 27 at 13:23
up vote 2 down vote

What I have done in my application with form is to pass the form object into the method that clears it instead of working off the scope directly. 

<button data-ng-click="clearAndResetForm(Form)"></button>

$scope.clearAndResetForm = (form:ng.IFormController)=> {
   this.clearAndResetForm(form);
};


private clearAndResetForm(form:ng.IFormController) {
   this.$scope.fieldOne = undefined;
   this.$scope.fieldTwo = undefined;
   form.$setPristine();
}

I'm not entirely sure why my code would work while yours doesn't. But hopefully this approach might help you.

share|improve this answer
    
Thanks. This approach works as well, but I found another way without having to pass the form reference. –  user2270404 Apr 27 at 12:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.