如何在 Angular Material 中为组件复选框设置“Y”和“N”的值？答案

【问题标题】：How in Angular Material to set values of "Y" and "N" for component checkbox?如何在 Angular Material 中为组件复选框设置“Y”和“N”的值？
【发布时间】：2019-06-25 05:18:23
【问题描述】：

我使用的数据库不使用布尔值 true 和 false。如何在Angular Material中为组件checkbox设置Y和N的值？

html:

<mat-checkbox formControlName="IS_ACTIVE"  (change)="checkboxChange($event.checked)">
      Active
</mat-checkbox>

ts：

  public setValueOptions = {
    onlySelf: true, 
    emitEvent: false, 
    emitModelToViewChange: false, 
    emitViewToModelChange: false
  }

  initializeForm() {
    if (this.data.action == 'add') {
      this.form = new FormGroup({
        NAME: new FormControl(null, [Validators.required]),
        IS_ACTIVE: new FormControl('Y')
      })
    }
  }

  checkboxChange(checkboxValue) {
    this.form.controls.IS_ACTIVE.setValue(checkboxValue ? 'Y' : 'N', this.setValueOptions);
  }

【问题讨论】：

在将数据发送到数据库之前将布尔值转换为Y 和N 怎么样？

标签： javascript angular angular-material

【解决方案1】：

不使用 formControlName。如果您有带有 [formControlName] 的输入，则 formGroup 存在。因此，您可以在输入中使用 [ngModel] (ngModelChange)

<mat-checkbox [ngModel]="form.get('IS_ACTIVE').value=='Y'? true:false"
              (ngModelChange)="form.get('IS_ACTIVE').setValue($event? 'Y':'N')"
              [ngModelOptions]="{standalone:true}">
      Active
</mat-checkbox>

更新真的没必要使用[ngModel]，只是

<mat-checkbox [checked]="form.get('IS_ACTIVE').value=='Y'? true:false"
              (change)="form.get('IS_ACTIVE').setValue($event.checked? 'Y':'N')"
              >
      Active
</mat-checkbox>

见stackblitz

【讨论】：

你看到stackblitz了吗？当您在 reactiveForm 中使用 [ngModel] 时，您需要放置 [ngModelOptions]="{standalone:true}" 否则 Angular 会给您一个错误，但这就是您所需要的。我更新了 stackblitz 以向表单组

【解决方案2】：

您可以绑定表单控件值以选中复选框并在更改事件上传递值。

类似的东西。

<mat-checkbox formControlName="IS_ACTIVE" (change)="checkboxChange('Y')" [checked]="form.controls.IS_ACTIVE.value == 'Y'">Active</mat-checkbox> 
<mat-checkbox formControlName="IS_ACTIVE" (change)="checkboxChange('N')" [checked]="form.controls.IS_ACTIVE.value == 'N'">Inactive</mat-checkbox>

我不确定是否有更好的方法来做到这一点。这只是一个建议。我希望这会有所帮助。

编辑：嗯，我想您唯一的选择是使用 [(ngModel)] 或 formControlName 并对您的数据进行一些操作。

首先，当您创建表单控件时。

this.form = new FormGroup({
    NAME: new FormControl(null, [Validators.required]),
    IS_ACTIVE: new FormControl('Y')// change this to true or false. maybe a condition checking the value for the string. Eg. value == 'Y' ? true : false.
  }

接下来，如果您在表单中执行此操作（这是我假设的），您应该使用 formControlName。

<mat-checkbox formControlName="IS_ACTIVE" formControlName="IS_ACTIVE">Active</mat-checkbox>

您不必检查更改事件，因为布尔值绑定在表单控件上。

然后在保存之前，将表单控件的值操作为“Y”或“N”

let boolVal = this.form.controls.IS_ACTIVE.value ? 'Y' : 'N'
//do something with boolVal

这是我能想到的实现目标的唯一选择。我希望这再次有所帮助。

【讨论】：

我编辑了我的帖子并添加了一些建议。希望对你有帮助。
@LukeVillanueva，解决方案是不使用 formControlName ;)

【解决方案3】：

提供 value="checked" 它将起作用！

<mat-checkbox value="form.controls.IS_ACTIVE.value == 'Y'"?checked:''" (click)="changeValue(checked)" color="primary">
   some Label
</mat-checkbox>

【讨论】：

如果默认是N 那么这将不起作用，checkbox 将处于活动状态