Как в Angular Material установить значения «Y» и «N» для компонента-флажка?

Question

База данных, которую я использую, не использует логические значения true и false.Как в Angular Material установить значения Y и N для компонента 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);
  }

Answer 1

Укажите значение = "флажок", он будет работать!

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

Answer 2

НЕ использовать formControlName.FormGroup существует, если у вас есть вход с [formControlName] или нет.Таким образом, вы можете использовать [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

Answer 3

Вы можете привязать значение элемента управления формы, чтобы установить флажок и передать значение в событии изменения.

Примерно так.

<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

Это единственный вариант, который я могу придумать для достижения вашей цели. Я надеюсь, что это поможет снова.