Angular 5中如何获取复选框的ng-true-value/ng-false-value值

你遇到的核心问题是混淆了AngularJS（1.x）和Angular（2+）的指令语法：ng-true-value和ng-false-value是AngularJS的专属指令，Angular（2+）并没有内置这两个属性，所以你设置的这两个值根本不会被框架解析，这就是你读不到预期自定义值的原因。

下面给你两种可行的解决方式，适配Angular的写法：

方案一：利用ngModelChange直接处理状态（推荐） #

通过ngModelChange监听复选框的状态变化，在组件逻辑里根据布尔值映射到你需要的自定义字符串：

修改后的模板 #

<div>
  <input 
    type="checkbox" 
    name="questionAnswerState" 
    [(ngModel)]="checkStatus" 
    (ngModelChange)="handleAnswerChange($event)" 
  /> 
  Answer Provided?
</div>

修改后的组件代码 #

// 初始化复选框状态为未选中
checkStatus: boolean = false;

handleAnswerChange(isChecked: boolean) {
  // 根据选中状态映射到自定义值
  const answerValue = isChecked ? 'answerProvided' : 'questionAnswerNotProvided';
  console.log(
    "question answer responseId:: ", this.responseId, 
    " questionId::", this.questionId, 
    " selected value::", answerValue
  );
}

这种方式最符合Angular的数据流逻辑，ngModelChange会直接返回复选框的布尔状态，你只需要在方法里做值的映射即可。

方案二：绑定原生value结合change事件 #

如果你更习惯通过DOM元素获取值，可以绑定原生value属性，然后在change事件里根据选中状态判断：

模板代码 #

<div>
  <input 
    type="checkbox" 
    name="questionAnswerState" 
    [value]="'answerProvided'"
    [(ngModel)]="checkStatus" 
    (change)="handleAnswerChange($event.target)" 
  /> 
  Answer Provided?
</div>

组件代码 #

checkStatus: boolean = false;

handleAnswerChange(target: HTMLInputElement) {
  const answerValue = target.checked ? target.value : 'questionAnswerNotProvided';
  console.log(
    "question answer responseId:: ", this.responseId, 
    " questionId::", this.questionId, 
    " selected value::", answerValue
  );
}

额外说明 #

你原来的代码里，check变量拿到的是布尔值而不是你设置的字符串，就是因为Angular不识别ng-true-value/ng-false-value。如果需要复用类似AngularJS的指令逻辑，也可以自定义一个Angular指令来封装这个功能，但上面两种方案已经足够解决你的需求了。

内容的提问来源于stack exchange，提问作者K.Z