Typescript AngularJS访问表单对象

Typescript AngularJS access form object

本文关键字：单对象 访问表 AngularJS Typescript      更新时间：2023-09-26

我正在使用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未定义。有什么想法吗？

它应该是这样的：

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

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

$scope.frm = {};
console.log($scope.frm.FirstName);
相关文章：