json-schema-form / angular-schema-form

Generate forms from a JSON schema, with AngularJS!
https://json-schema-form.github.io/angular-schema-form
MIT License
2.47k stars 653 forks source link

Checkbox mapped to Yes/No value #793

Closed karthiks3000 closed 7 years ago

karthiks3000 commented 7 years ago

Question

I have a particular field that I want to display as a checkbox. But the data in the field is being returned as either a Yes/No. The property in the schema is of type string and I can override it by setting the type in the form to be a checkbox. However, how do I convert the Yes to True and No to False? I tried using a title map, but I think i'm doing it wrong. Is this even possible?

Here is my code { "key": "StreamingBlackout", titleMap: [{ value: "yes", name: true }, {value:"no", name:false}] }

@json-schema-form/angular-schema-form-lead

joelwkent commented 7 years ago

Hi @karthiks3000, a schema data type of boolean will default to a checkbox in your form. You can see this on the example page in the "Basic JSON Schema Type" example.

Checkout this example of a schema that contains just a boolean element with key "StreamingBlackout" and a form that sets a title for it (code below also):

$scope.form = [
  {
    "key": "StreamingBlackout",
    "title": "Sreaming Blackout (please choose)"
  },
  {
    "type": "submit",
    "title": "OK"
  }
];

$scope.schema = {
  "type": "object",
  "title": "Types",
  "properties": {
    "StreamingBlackout": {
      "type": "boolean"
    }
  }
};
karthiks3000 commented 7 years ago

Hi @joelwkent, my problem is that I am consuming a service that is created by someone else. I can't alter the data type of the property. The service will always return a Yes/No for that property. If I set the schema to be boolean for that property, won't the binding fail?

joelwkent commented 7 years ago

Hi @karthiks3000, OK got it. I've had this exact problem in the past. Your options are to use a select field type with two options or radio buttons. You cannot use a single checkbox on a string enum. And field type checkboxes can only be used with arrays which I don't think will work with your data type.

If you really must use a single checkbox and you have no control server side you could parse the data you receive from the server in Angular/JavaScript before initialising the form. What I mean is you could convert the model value from "Yes" to Boolean true and "No" to false then display your form. But then the model would contain true and false going forward and being sent back to the server.

UPDATE: The last sentence is not correct, you could convert the Boolean back to "Yes", "No" in your submit function before sending the model back to the server.

karthiks3000 commented 7 years ago

I thought as much... Thanks for the confirmation @joelwkent Yes, I think I will probably need to use the select or radio button approach. I plan to use the schema generated by the service (which is also not in my control) and it has the property listed as a string.