powmedia / backbone-forms

Form framework for BackboneJS with nested forms, editable lists and validation
MIT License
2.17k stars 413 forks source link

Object Editor does not work when template is present #376

Open mateam opened 10 years ago

mateam commented 10 years ago

Please look at this fiddle to see an example of an Object editor being used in a form with a template.

http://jsfiddle.net/triptifty/dW2Qu/416/

Here is the same example, except a template is not present. For some reason, the Object editor displays correctly in this example but not in the previous one:

http://jsfiddle.net/triptifty/dW2Qu/415/

FlorianBruniaux commented 10 years ago

Hi,

In your schema you should do :

 var User = Backbone.Model.extend({
        schema: {
            title:      { type: 'Select', options: [{label:"Miss"},{label:"Mrs"}, {label:"Mr", disabled: true}] },
            name:       'Text',
            addressForm.street: { type: 'Text' },
            addressForm.zip: { type: 'Number' }
        }
});

And in your template :

<div class="form-container">
       <div class="form-field-container" data-fields="name,title"></div>
       <div class="form-field-container" data-fields="addressForm.street"></div>
       <div class="form-field-container" data-fields="addressForm.zip"></div>
       <input type="submit" class="btn btn-primary submit" />
</div>

;)

emudojo commented 7 years ago

I see something similar, if I do

address_id: {
          type: 'Object', title: 'Contact Address', subSchema: {
            id: {type: 'Hidden'},
            c: {
              title: 'Address',
              validators: [{type: 'required', message: 'Address is required and has to be valid'}],
              editorAttrs: {placeholder: 'Address'}
            },
            address2: {
              title: 'Address2',
              validators: [{type: 'required', message: 'Address is required and has to be valid'}],
              editorAttrs: {placeholder: 'Address'}
            },
            city: {title: 'City', type: 'Text', validators: ['required'], editorAttrs: {placeholder: 'City'}},
            state: {title: 'State', type: 'Text', editorAttrs: {placeholder: 'Phoenix'}},
            zip: {title: 'Zip', type: 'Text', editorAttrs: {placeholder: '00000-0000'}}
          }
        }

and then in my template I do

<div class="form-field-container" data-fields="address_id.address"><!-- firstName editor will be added here --></div>

or

<div class="form-field-container" data-editors="address_id"><!-- firstName editor will be added here --></div>

it gives me this error

image