Typescript AngularJS access form object

Question

I am using AngularJS and Typescript.

I got a problem trying to access the form object.

Following is my HTML

    <form name="myForm" novalidate>

    <label>First Name</label>
<input type="text" ng-model="frm.FirstName" name="FirstName"    />
<button ng-click="logit()"></button>
</form>

Now i want to access the frm object my typescript code is as follows

module TestCtrl{
    interface ITestController{
        logit(): any;
    }

    class TestController implements ITestController{

        frm: any;
        constructor() {
            var vm = this;
            var frm = {};

        }

        logit(){
            var vm;
            console.log(frm.FirstName);
        }

    }

    angular.module('app').controller('TestCtrl', TestController);
}

The console says frm is not defined. Any ideas?

Use this.frm.FirstName. Your typescript compiler should have catched this error — devqon
– devqon, Commented Nov 26, 2015 at 9:31

Callum Linington · Accepted Answer · 2015-11-26 09:36:09Z

3

It should look like this:

module TestCtrl{
    interface ITestController{
        logit(): void;
        frm: any;
    }

    class TestController implements ITestController{

        frm: any;
        constructor() {
            var vm = this;
            vm.frm = {};

        }

        logit(){
            console.log(this.frm.FirstName);
        }

    }
    angular.module('app').controller('TestCtrl', TestController);
}

What you got to remember that var vm = this; is just a way of storing your current scope. And typescript does a pretty good job of doing that in the first place. So it won't generally make a difference you putting vm in.

You may also want to think about typing your form out as well.

interface IFormViewModel {
    firstName: string;
    lastName: string;
}

thus making your ITestController

interface ITestController{
    logit(): void;
    frm: IFormViewModel;
}

class TestController implements ITestController{
    frm: IFormViewModel;

    constructor() {
        this.frm = {};
    }

    logit(){
        console.log(this.frm.firstName);
    }
}
angular.module('app').controller('TestCtrl', TestController);

edited Nov 26, 2015 at 9:36

answered Nov 26, 2015 at 9:31

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3052526 Over a year ago

Thanks for the idea of typing the form, very convenient actually. Regarding the logit function it console.logs undefined as it seems not to be able to find the FirstName any ideas why?

Callum Linington Over a year ago

yeah you need to remember to use the ControllerAs syntax when specifying where to use the controller otherwise this won't work.

user3052526 Over a year ago

Do you know how i can console.log myForm.FirstName the only way so far is this.$scope.myForm.FirstName any ideas?

Vivek · Accepted Answer · 2015-11-26 09:28:43Z

0

In AngularJS, You can access the model inside the controller using $scope variable. In your case it would be

$scope.frm = {};
console.log($scope.frm.FirstName);

answered Nov 26, 2015 at 9:28

Vivek

13.6k19 gold badges101 silver badges140 bronze badges

Collectives™ on Stack Overflow

Typescript AngularJS access form object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related