Question

我有一个非常简单的界面：

（models.ts）

export interface User{
Id : number;
FirstName : string;
LastName : string;
Email: string;
PhoneNumber: string;
}

一个非常简单的形式：

（app.component.html）

 <fieldset class='form-group' >
  <h2>Create New User</h2>
  <label>First Name: <input type="text" [(ngModel)]='FirstName'></label><br>
  <label>Last Name: <input type="text" [(ngModel)]='LastName'></label><br>
  <label>Phone number: <input type="phone"[(ngModel)]='PhoneNumber'></label><br>
  <label>Email Address: <input type="email" [(ngModel)]='Email'></label><br>
<button (click)="createNewUser()">Create User</button>
</fieldset>

我将数据绑定到简单字符串，然后根据这些字符串创建对象。这是有效的，但感觉有点乱，我想知道是否有可能新建一个空对象，然后将它们直接分配给对象：

（app.component.ts）

 userToCreate: User;

（app.component.html）

    <label>First Name: <input type="text" [(ngModel)]='userToCreate.FirstName'></label><br>

当我尝试这样做时，TypeScript会抛出一个错误说明

无法读取未定义的属性'FirstName'

我做错了什么，或者这是不可能的？

Answer 1

问题是userToCreate是undefined，因此没有您绑定的属性。

您需要绑定到组件的各个属性，然后在createNewUser函数中组合用户对象;或者您需要使用至少一个空对象初始化userToCreate。

userToCreate: User = {} as User;

需要类型断言（也称为强制转换），因为{}实际上并未定义User接口所需的属性（因为它们都不是可选的）。

Answer 2

我建议您考虑将反应表单与表单构建器一起使用，这样您就可以：

更好地操纵您的输入;
添加验证;
你也可以在按钮上使用NgOnSubmit;

Reactive forms docs

此外，我相信您的未定义对象问题将得到解决，因为您可以在表单构建器中添加输入法和默认值。

将新对象绑定到Angular表单而不是单个属性

2 个答案: