首页 文章

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

提问于
浏览 次
0

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

（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会抛出一个错误说出来

无法读取undefined的属性'FirstName'

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

javascript angular typescript

2 回答

  • 1

    问题是 userToCreate 是 undefined ，因此没有绑定到的属性 .

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

    userToCreate: User = {} as User;

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

    回复于
  • 1

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

    • 更好地操纵你的输入;

    • 添加验证;

    • 你还可以在按钮上使用NgOnSubmit;

    Reactive forms docs

    此外，我相信您的未定义对象的问题将得到解决，因为您将能够在表单生成器中添加打字和默认值 .

    回复于

相关问题