使用 angular 双向数据绑定 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).

Answer 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.. :)

Answer 2

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