Angular 5中如何提交复选框实际值而非布尔值？

嘿，我来帮你搞定Angular 5模板驱动表单里复选框提交自定义值的问题！默认情况下复选框绑定的是布尔值，但咱们可以通过几种简单方式改成你想要的实际值，下面给你一步步说明：

这是最直接的方式，给复选框设置目标值，然后通过change事件判断勾选状态来赋值：

模板代码：

<div class="form-group">
  <label class="control-label">用户状态</label>
  <input 
    type="checkbox" 
    class="form-check-input"
    name="userStatus" 
    [value]="'active'" 
    [(ngModel)]="finalData.userStatus"
    (change)="updateCheckboxValue($event, 'active', 'inactive')"
  />
  <span class="form-check-label">激活</span>
  <!-- 未勾选时赋值为'inactive'，你也可以改成null或者其他值 -->
</div>

组件类里的处理函数：

updateCheckboxValue(event: Event, checkedVal: string, uncheckedVal: string) {
  const checkbox = event.target as HTMLInputElement;
  this.finalData.userStatus = checkbox.checked ? checkedVal : uncheckedVal;
}

这样提交表单时，finalData.userStatus就会是'active'（勾选）或者'inactive'（未勾选），而不是布尔值啦。

如果不需要复用逻辑，也可以把逻辑直接写在模板里，省去组件类的函数：

<input 
  type="checkbox" 
  name="userRole" 
  [value]="'admin'" 
  [(ngModel)]="finalData.userRole"
  (change)="finalData.userRole = $event.target.checked ? 'admin' : 'viewer'"
/>

这种方式更简洁，适合简单场景。

如果你的项目里很多地方都需要这种需求，封装一个可复用的组件会更高效：

自定义组件模板（custom-checkbox.component.html） #

<div class="form-check">
  <input 
    type="checkbox" 
    class="form-check-input"
    [checked]="model === checkedValue"
    (change)="handleChange($event)"
  />
  <label class="form-check-label">{{ label }}</label>
</div>

自定义组件类（custom-checkbox.component.ts） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html'
})
export class CustomCheckboxComponent {
  @Input() label: string;
  @Input() checkedValue: any; // 勾选时的实际值
  @Input() uncheckedValue: any = null; // 未勾选时的默认值，可自定义
  @Input() model: any;
  @Output() modelChange = new EventEmitter<any>();

  handleChange(event: Event) {
    const checkbox = event.target as HTMLInputElement;
    this.modelChange.emit(checkbox.checked ? this.checkedValue : this.uncheckedValue);
  }
}

使用自定义组件 #

<app-custom-checkbox
  label="管理员权限"
  [checkedValue]="'admin'"
  [uncheckedValue]="'viewer'"
  [(model)]="finalData.userRole"
></app-custom-checkbox>

这样不管在项目哪个地方用，都能轻松实现复选框提交自定义值的需求，维护起来也方便。

最后提醒下：提交表单时，你可以在submitForm()函数里打印finalData看看，对应的属性已经是你设置的实际值啦！

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