Angular 2+ tyring to bind a checkbox (mat-checkbox) Angular Material value from True or False to char values 'T', 'F'

Question

Need help trying to change the value of my Checkbox (mat-checkbox) Angular Material to a value such as 'T' and 'F' that can be passed when my form is submitted with my json object. This 'T' or 'F' from the JSON object is flipping a char flag on my backend. Any help would be appreciated, not sure why I can't seem to figure it out.

-----HTML------------

<div class="form-check">
  <label class="form-check-label" style="padding-right: 10px;">Send to MIP</label>
  <mat-checkbox name="mip" [ngModel]="mip"  class="form-check-input" #mip="ngModel"></mat-checkbox>
</div>

------current value----

{ "mip": true }

G. Tranter · Accepted Answer · 2018-06-01 21:06:44Z

1

You aren't binding checkbox UI changes to your model. [ngModel] just binds the model changes to the UI/view. Use [(ngModel)] for two-way binding or add (ngModelChange) for view-to-model binding. To have it handle "T" and "F", implement a getter and setter:

<mat-checkbox [(ngModel)]="mip">Check me!</mat-checkbox>

get mip():boolean {
  return this._mip === "T";
}
set mip(value: boolean) {
  if(value) {
    this._mip = "T";
  } else {
    this._mip = "F";
  }
}
_mip: string = "T";

Or

<mat-checkbox #cb [ngModel]="getMip()" (ngModelChange)="setMip(cb.checked)">Check me!</mat-checkbox>

getMip():boolean {
  return this._mip === "T";
}
setMip(value: boolean) {
  if(value) {
    this._mip = "T";
  } else {
    this._mip = "F";
  }
}
_mip: string = "T"

answered Jun 1, 2018 at 21:06

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avinash · Accepted Answer · 2018-06-01 19:54:56Z

0

You can only have a boolean value for a checkbox, what you can do as a workaround is when you submit the form and in the method where you listen for form submission, you can use ternary operator to assign 'T' or 'F'. example if you have the formData as :

formData = {
    "mip" : true
}

then use :

(formData['mip']===true) ? formData['mip'] = 'T' : formData['mip] = 'F'

answered Jun 1, 2018 at 19:54

Avinash

1,24312 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 2+ tyring to bind a checkbox (mat-checkbox) Angular Material value from True or False to char values 'T', 'F'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related