是否可以在Angular控制器方法中建模绑定整个对象？

I have the following Interface defined in TypeScript:

我在TypeScript中定义了以下接口:

interface Person {
    Id: number;
    FirstName: string;
    LastName: string;
    Age: number;
}

I have a .html partial that contains an Angular ng-submit="submit()" directive on an HTML form element. Here is an example element from inside the form:

我有一个.html部分,它包含HTML表单元素上的Angular ng-submit =“submit()”指令。以下是表单内部的示例元素:

<input id="FirstName" name="FirstName" type="text" class="form-control" ng-model="FirstName" placeholder="Enter First Name" />

What I'd like to have is the following call on sumbit map form values to the object argument on the submit call like below:

我想要的是以下调用sumbit map表单值到提交调用上的object参数,如下所示:

$scope.submit = (person: MyApp.Models.Person) => {
  //Access person values
}

The problem is when inspecting the person value on calling submit() it is undefined and not populated.

问题是在调用submit()时检查person值时,它是未定义的并且未填充。

I'd like to know if it's possible to have the multiple <input> form values from within the form element automatically used and bound to the object argument that is known by TypeScript in the submit() method?

我想知道是否可以自动使用表单元素中的多个表单值并将其绑定到submit()方法中TypeScript已知的对象参数?

The answer may be this is entirely not possible, but I'd like to know before I manually have to get each ng-model value and hydrate a Person instance from within my submit() function.

答案可能是完全不可能的,但我想知道之前我手动获取每个ng-model值并从我的submit()函数中补充Person实例。

1 个解决方案

#1

It is possible. And some say it is even a recommended strategy.

有可能的。有人说这甚至是推荐的策略。

Rather than use the members of the person object directly on your form elements (ng-model=FirstName), use dot notation with a person object (ng-model=person.FirstName). For example on your scope object:

不是直接在表单元素(ng-model = FirstName)上使用person对象的成员,而是使用带有person对象的点表示法(ng-model = person.FirstName)。例如,在您的范围对象上:

$scope.person: MyApp.Models.Person;

and in your markup (note the difference on your ng-model):

并在你的标记中(注意你的ng模型的差异):

<input id="FirstName" name="FirstName" type="text" class="form-control" ng-model="person.FirstName" placeholder="Enter First Name" />

Now when you call your submit function, you can send it the person model

现在,当您调用提交功能时,您可以将其发送给人员模型

ng-submit="submit(person)"

and your submit function person parameter will have access to all the members of the person object defined on your form.

并且您的提交函数person参数将有权访问表单上定义的person对象的所有成员。

#1