Bind a string value to a checkbox toggle using angular two-way data binding angular 7

Question

<div class="form-group col-12 col-md-6">
     <label class="mb-1 mr-2">
         Status 
     </label> 
     <div class="custom-control custom-checkbox-toggle">
          <input type="checkbox" class="custom-control-input" id="status"
              [(ngModel)]="question.conditions[0].status">
                                    
          <label class="custom-control-label" for="status"></label>
      </div>  
 </div>
`
Conditions: [
  {
    "status": "",
    "questionId": {
      "eq": "6012e7378d65710016832916"
    },
    "selects": {
      "in": [
        "6012e7eb8d65710016832b61",
        "6012e7eb8d65710016832b65"
      ]
    }
  }
]

I want to binding my data is 'active' || 'disabled' to this toggle when i switching it.But it not works and crashing the page.My required is binding it with string value(not binding boolean value).

Please, post your .ts. And the message that appears in console when your screen crashes. For the readers to have more information about your problem : ) — Eduardo Junior
– Eduardo Junior, Commented Jan 29, 2021 at 16:48

Ganesh · Accepted Answer · 2021-01-29 16:51:41Z

1

Add [checked] attribute as below code, so that it will bind the property.

   <input type="checkbox" class="custom-control-input" id="status" 
        [checked]="question.Conditions[0].status != '' || question.Conditions[0].status != 'true' ?  true: false "
            [(ngModel)]="question.Conditions[0].status">

There is something which is missed from json, Conditions to conditions (if not typo)

Happy Coding.. :)

answered Jan 29, 2021 at 16:51

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

1 Comment

Dwayne123 Over a year ago

can i ask? where can i add my string value which is 'active' or 'disabled' inside your suggestion?Can you detail

Msk Satheesh · Accepted Answer · 2021-01-30 03:18:27Z

1

Try using (change) and bind your value there

<input type="checkbox" class="custom-control-input" id="status"
            [(ngModel)]="question.Conditions[0].status"  
(change)="question.Conditions[0].status = question.Conditions[0].status ? 'active' : 'disable';">

You can assign the value on changing of the checkbox

answered Jan 30, 2021 at 3:18

Msk Satheesh

1,5461 gold badge8 silver badges9 bronze badges

1 Comment

Eliseo Over a year ago

use simply

<input ... [ngModel]="question.Conditions[0].status=='active'" (ngModelChange)="question.Conditions[0].status=$event?'active':'disabled'">

Collectives™ on Stack Overflow

Bind a string value to a checkbox toggle using angular two-way data binding angular 7

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related