以反应形式处理嵌套数据

Question

我必须做一个 POST 所以我们经常做这样的事情：

const userData = this.userForm.value;

假设您在模板中有：

<input type="text" id="userName" formControlName="userName">
<input type="email" id="userEmail" formControlName="userEmail">
<select id="userTypeId" formControlName="userTypeId">
  <option *ngFor="let userType of userTypes" [value]="userType.id">{{userType.name}}</option>
</select>

然后在您的 userData 中您将拥有：

{
  userName: 'foo',
  userEmail: 'foo@bar.com',
  userTypeId: '1'
}

很好，但是现在您的 API 正在等待：

{
  userName: string,
  userEmail: string,
  userType: UserType
}

其中 UserType

{
  id: string,
  name: string,
}

所以你最终会这样做：

const userForAPI = {
  userName: userData.userName,
  userEmail: userData.userEmail,
  userType: { id: userData.userTypeId }
}

然后你去

this.userService.createUser(userForAPI)

现在，我想知道是否有不这样做的替代解决方案：

userType: { id: userData.userTypeId }

我的意思是，如果您可以根据 api 的模型对模板进行建模，那么您就可以将 this.userForm.value 发送到 api。

Answer 1

如果您使用 ngValue 而不是 value，select/option 控件的值可以是自定义对象，而不仅仅是字符串。这意味着您可以更改模型以使用 userType 而不是 userTypeId.

<select id="userType" formControlName="userType">
  <option *ngFor="let userType of userTypes" [ngValue]="userType">{{userType.name}}</option>
</select>

例如，模型现在将包含以下内容。

{
  userName: 'foo',
  userEmail: 'foo@bar.com',
  userType: {id: '1', name: 'foo1'},
}

这是 demo。

以反应形式处理嵌套数据

Handling nested data in reactive forms

typescript

graphql

angular

angular-reactive-forms