Angular - checkbox for string value of "true" or "false" gets checked always-CodePudding

I am working with an Angular application and getting data from a database. What gets returned is a string value, with different kinds of "values", some may be a string of JSON data, some may be just a string of texts, some is a string of boolean "true" or "false", however, it's still just a string.

And I have made changes so the type of input will change depending on what kind of string version it is.

for the "true" and "false", I made it so it now is a checkbox. The checkbox should be checked when it returns "true", and when unchecking, in the console, it now is a "false". But the checkbox is always checked

here are some code snippets

<input 
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value"
       ng-checked="isBoolValue" />

here I am using both a ngModel and a ng-checked, however, in the form, the only thing that works when submitting is ngModel, to make a change in the database from true to false. isBoolValue is just a boolean to check if this is true or false.

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.isBoolValue = true;
      }
    });
}

Any idea how this could be done?

Make a checkbox unchecked if the string value is "false", right now it is always checked because its not true boolean value, just a string value with "true" or "false"

CodePudding user response：

the issue come because isBoolValue is always set to true

an idea can be to cast the value return by your observable to a boolean and use it in the ng-checked

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.model.value = (this.model.value === 'true');
        this.isBoolValue = true;
      }
    });
}

<input 
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value"
       ng-checked="model.value" />

CodePudding user response：

I made some new changes and now it works as expected.

in the ts file i changed from

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true'
        || this.model.value === 'false') {
        this.isBoolValue = true;
      }
    });
}

To this

getDataById(id: string) {
  this.dataService.getDataById(id)
    .subscribe(result => {
      this.model = result;
      if (this.model.value === 'true') {
        this.model.value = true;
        this.isBoolValue = true;
      } 
      else if(this.model.value === 'false') {
        this.model.value = false;
        this.isBoolValue = true;
      }
    });
}

and in my html file

<input 
       type="checkbox"
       *ngIf="isBoolValue"
       [(ngModel)]="model.value" />

Just removed the ng-checked.

I also changed the type on value, from string to any.

value: any; instead of value: string;

When doing this I was able to change the value to a boolean type and hence be able to work with real boolean values and not just string values