Angular 5表单绑定：如何兼顾数据获取与后端提交需求

这问题在Angular开发里挺常见的——既要满足后端提交用slug的要求，又要在切换选项时用id拉取对应数据，咱们有两种简单靠谱的解决办法：

方法一：用[ngValue]绑定整个Item对象 #

Angular的select组件支持用[ngValue]绑定完整对象，这样表单控件的值就是整个item，既能轻松拿到id调用接口，提交时再提取slug即可。

修改模板（component.html） #

<select class="form-control" 
        [formControl]="subCategoryForm.controls['l1category']" 
        (change)="fetchProductTypeForCategory($event)">
  <option *ngFor="let item of categorys" [ngValue]="item">{{item.name}}</option>
</select>

修改组件方法（component.ts） #

fetchProductTypeForCategory(event) {
  // 直接从选中值拿到完整的item对象
  const selectedItem = event.target.value;
  if (!selectedItem) return;

  this.productTypeSrv.fetchProductTypesParam(selectedItem.id)
    .subscribe(
      res => this.productTypes = res,
      err => console.log(err)
    );
}

表单提交处理 #

因为表单控件存的是整个item，提交时需要把它转成slug传给后端：

onSubmitForm() {
  // 复制表单值避免修改原对象
  const submitData = { ...this.subCategoryForm.value };
  // 把l1category字段替换成slug
  submitData.l1category = submitData.l1category.slug;
  
  // 这里调用提交接口
  // this.apiService.submitForm(submitData)...
}

方法二：用HTML data-* 属性存储id #

这种方法更贴近原生HTML玩法，把id存在option的自定义data属性里，select的value直接绑定slug，提交时不用额外处理，切换时从data属性取id即可。

修改模板（component.html） #

<select class="form-control" 
        [formControl]="subCategoryForm.controls['l1category']" 
        (change)="fetchProductTypeForCategory($event)">
  <option *ngFor="let item of categorys" 
          [value]="item.slug" 
          [attr.data-id]="item.id">{{item.name}}</option>
</select>

修改组件方法（component.ts） #

fetchProductTypeForCategory(event) {
  // 获取选中的option元素，提取data-id的值
  const selectedOption = event.target.selectedOptions[0];
  const categoryId = selectedOption?.dataset.id;
  if (!categoryId) return;

  this.productTypeSrv.fetchProductTypesParam(categoryId)
    .subscribe(
      res => this.productTypes = res,
      err => console.log(err)
    );
}

两种方法对比 #

• 方法一：适合后续可能需要用到item其他属性的场景，扩展性强，但提交时需要额外转换字段。
• 方法二：逻辑更简单，提交无需额外处理，适合只需要id和slug的极简场景。

内容的提问来源于stack exchange，提问作者CE0