allow to define a pre-existing HTML layout where fields will be inserted

[ebrehault]

We can define an HTML layout in the FORM tag, it will be preserved by the form directive, and if it contains some tags with a sf-insert-field attribute, the corresponding fields will be inserted at this position (the other fields will be generated bellow). Example:

<form name="ngform" sf-model="modelData" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
    <p>Main information:</p>
    <ul>
        <li><span sf-insert-field="name"></span></li>
        <li><span sf-insert-field="email"></span></li>
    </ul>
</form>

It is a way to allow to build a specific layout manually in a very flexible way.

[davidlgj]

I've started testing it a bit, added a <div sf-insert-field="name"></div> into bootstrap-exampel.html,
you can see it here https://github.com/Textalk/angular-schema-form/blob/ebrehault-pre-existing-html-layout/examples/bootstrap-example.html#L45

If you run bootstrap-example.html in that branch it starts out fine, but changing anything in the form definition (triggering an update) doubles the fields inserted by sf-insert-field!

[ebrehault]

oh, ok, let me have a look

[ebrehault]

Ok, the slot need to be cleaned up everytime we insert the field.
That's fixed.
(By the way, I am supposed to commit the dist/*.js files or not?)

[davidlgj]

Great! Just skip the dist files, makes the merge easier :)
Den 3 okt 2014 16:44 skrev "Eric BREHAULT" notifications@github.com:

Ok, the slot need to be cleaned up everytime we insert the field.
That's fixed.
(By the way, I am supposed to commit the dist/*.js files or not?)

—
Reply to this email directly or view it on GitHub
#112 (comment)
.

[ebrehault]

done

[quietlyconfident]

+1

If this gets working, it could provide a temporary way to hack around the issues #98 and #123, by letting the user define the HTML layout of the sub-form to use the <ng-form> element rather than the <form> element

[davidlgj]

Heads up! I fixed the code up a bit so it only does one querySelectorAll instead of multiple querySelector and added support for complex keys, doing that I had to change the syntax a bit. Basically the value part of the sf-field-insert must have the bracket notation that ObjectPath gives us.

So

<div sf-insert-field="name"></div>

becomes

<div sf-insert-field="['name']"></div>

And complex keys works

<div sf-insert-field="['foo']['com-plex']"></div>

In development, commit here:
1b6bac1