How to reference properties and methods from form within TypeScript controller?

Question

I have a simple question that I haven't found an answer to yet.

In regular Angular JavaScript, if I have the beginning of a form like this:

<form novalidate action="" class="signupForm" name="signup.form">
    <div class="row">
        <div class="col-md-12 ">
            <fieldset>
                <input type="text" name="fullName" placeholder="Full Name" ng-model="signup.fullName" required />{{signup.fullName}}
                <div ng-show="signup.form.$submitted || signup.form.$touched">
                    <span ng-show="signup.form.$error.required">Please enter your full name.</span>
                </div>
            </fieldset>
        </div>
    </div>

Using controllerAs for example, using SignupCtrl as signup with UI Router, I can reference my form in my controller like this:

.controller(function() {
     this.form // shows me my form
 });

However, in TypeScript, this refers to my class and its own variables and methods, unless I am mistaken. How can I reference the form, or anything, in my TypeScript controller? How is scope bound to the view now?

export class SignupCtrl implements ISignupCredentials {                     

        constructor(protected $http: ng.IHttpService, 
                    protected $q: ng.IQService,
                    protected $scope: IScope) {                                                

            console.log(this.form); // undefined because form doesn't exist in my controller class                                    
        }


    }

Delta · Accepted Answer · 2015-12-31 22:10:18Z

0

We do it like this:

function myDirective(): ng.IDirective
{
    return {
        restrict: "E",
        templateUrl: 'template.html',
        controller: 'MyController',
        scope:
        {
        },
        link: (scope, element, attrs, controller: MyController) =>
        {
            scope.vm = controller;
        }
    };
}

angular.module('mod').directive("mydirective", myDirective);

export class MyController
{
    public ImOnHTML: string = "helloWorld";

    static $inject = [];
    constructor()
    {

    }
}

angular.module('mod').controller('MyController', MyController);

and then in the template.html all of your controllers properties will be on vm.

so: <input ng-model="vm.ImOnHTML"/>

answered Dec 31, 2015 at 22:10

Delta

8611 gold badge6 silver badges12 bronze badges

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

1 Comment

Thomas Over a year ago

Thanks for this answer. This does imply though, that you must create a directive in order to tie the model to the view with scope. Is there another way to do this using just the controller? Ie. reference the form directly from the controller without creating a directive?

Seamus · Accepted Answer · 2016-01-01 17:38:08Z

Actually, I think what you're doing is pretty close.

As you know, when you give your <form> the name "signup.form" and you are using "controller as" syntax, Angular will add a reference to your form to your controller so that it can be referenced as "signup.form". [1]

Using TypeScript doesn't change this. But to keep the compiler happy, you have to add the appropriate property to your class. In this case "form":

export class SignupCtrl implements ISignupCredentials {                     
    form: any;

    constructor(protected $http: ng.IHttpService, 
                protected $q: ng.IQService,
                protected $scope: IScope) {

    }
}

Also, this.form will be undefined until Angular sets its value, which won't have happened yet when your constructor() method is executed.

Collectives™ on Stack Overflow

How to reference properties and methods from form within TypeScript controller?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related