How in Angular Material to set values ​of “Y” and “N” for component checkbox?

筅森魡賤 提交于 2021-01-28 12:11:09

问题


The database I use does not use boolean values true and false. How in Angular Material to set values ​​of Y and N for component checkbox?

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);
  }

回答1:


NOT use formControlName. The formGroup exist if you has an input with [formControlName] or not. So, you can use a [ngModel] (ngModelChange) in a input

<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>

Updated Really it's not necesary use [ngModel], just

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

See stackblitz




回答2:


You can bind your form control value to check the checkbox and pass a value on the change event.

Something like this.

<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> 

I'm not sure if there's a better way to do this. This is just a suggestion. I hope this helps.

EDIT: Well I guess the only option you have is to use [(ngModel)] or formControlName and do a bit of manipulation on your data.

First, when you create your form controls.

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.
  }

Next, if you are doing this inside a form (which is what I'm assuming) you should use formControlName.

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

You don't have to check for the change event as the boolean values bind on the form control.

Then before saving on, maniputale the form control's values to 'Y' or 'N'

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

This is the only option I can think of to achieve your goal. I hope this helps again.




回答3:


Provide value="checked" it will work!

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


来源:https://stackoverflow.com/questions/56747250/how-in-angular-material-to-set-values-of-y-and-n-for-component-checkbox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!