ulion / jsonform

Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.
http://ulion.github.io/jsonform/playground/
MIT License
49 stars 27 forks source link

Title with value of array property #3

Open thenewguy opened 9 years ago

thenewguy commented 9 years ago

Support the use of {{ value }} template to reference properties with an object type

I.e. with the following, the titles would be "Friend Foo" and "Friend Bar" if two friends were added with nicknames of "Foo" and "Bar"

{
  "schema": {
    "friends": {
      "type": "array",
      "items": {
        "type": "object",
        "title": "Friend {{ value.nick }}",
        "properties": {
          "nick": {
            "type": "string",
            "title": "Nickname",
            "required": true
          },
          "gender": {
            "type": "string",
            "title": "Gender",
            "enum": [ "male", "female", "alien" ]
          },
          "age": {
            "type": "integer",
            "title": "Age"
          }
        }
      }
    }
  }
}
ulion commented 9 years ago

"Friend {{ value.nick }}" such title should not be in the schema, which should be in the form definition.

Indeed jsonform support set title "Friend {{ values.friends[].nick }}", but which only works for the initial value, not update when the nick changes.

Or, if you are using tabarray type, which support setup "valueInLegend: true" for the nick form element, then setup 'legend: "Friend {{value}}"' for the array element, which support dynamic update the tab name according to the value of one of the sub-elements of the array element.

As a workaround, you can always write your own on change function to archive what you want, e.g.

$('form').on('change', 'input[name^="friends["][name$="].nick"]', function(e) {
  var val = $(this).val();
  $(this).parents('.jsonform-node').eq(1).find('> legend').text('Friend ' + val);
});