validering - AngularJS $setPristine med TypeScript: formulär är odefinierat

När jag försöker använda form.$setPristine från TypeScript fungerar det inte och debug visar att form är odefinierad. Enligt det jag har läst ska $scope.formName.$setPristine() sätta formuläret till pristine. För att komma åt $scope.formName från controllern lade jag till det i mitt egna scope-interface som en ng.IFormController-egenskap. Men när jag anropar $scope.form.$setPristine() fungerar det inte, och debug visar att $scope.form är odefinierad.

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>

Svar #1

Vad jag har gjort i min ansökan med formuläret är att skicka formulärobjektet till metoden som rensar det istället för att arbeta direkt med scopet.

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

Jag är inte helt säker på varför min kod skulle fungera medan din inte gör det. Men förhoppningsvis kan detta tillvägagångssätt hjälpa dig.

Svar #2

Även om Sobieck00:s lösning fungerar lika bra, tack vare stevuu:s förslag har jag felsökt det och hittat ett sätt att göra det utan att behöva skicka formulärreferensen. form kan nås som $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
}

Sedan i $scope.addEmployee() återställ det med:

$scope.$$childTail.form.$setPristine();

Relaterade artiklar