Question

我正在使用AngularJS和Typescript。

我在尝试访问表单对象时遇到了问题。

以下是我的HTML

    <form name="myForm" novalidate>

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

现在我想访问frm对象我的打字稿代码如下

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

控制台说没有定义frm。有什么想法吗？

Answer 1

它应该是这样的：

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

您必须记住var vm = this;只是存储当前范围的一种方式。而打字稿在这方面做得非常好。因此，将vm放入其中通常不会产生影响。

您可能还想考虑输入表单。

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

从而制作您的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);

Answer 2

在AngularJS中，您可以使用$scope变量访问控制器内的模型。在你的情况下，它将是

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

Typescript AngularJS访问表单对象

2 个答案: