how to create a html form using a JSON definition?

[edwardro...@gmail.com]

Referencing my question on http://stackoverflow.com/questions/5508871/how-to-create-a-html-form-using-a-json-definition 

I am looking for a javascript lib which enables me to store (html) forms in JSON format, with a bit of intelligence built into validate inputs client side. Something like:

function FormController(){
  this.user = {
    name: 'John Smith',
    address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
    contacts:[{type:'phone', value:'1(234) 555-1212'}]
  };
  this.state = /^\w\w$/;
  this.zip = /^\d\d\d\d\d$/;
}

(This is taken from http://docs.angularjs.org/#!cookbook.form ). It's almost what I want, as it offers basic client side validation with regular expressions and you can provide defaults but it appears to still need you to create the HTML form.

I want something that only requires the definition. Any ideas?

..........

Angular doesn't solve your problem out of the box because it asumes that you have static html which you want to bind some data to. Having said that you can use angular to fulfill your objectives. You can create a new tag (angular widget) which will take a js object and dynamically creates the form DOM along with all the angular validation attributes. You then compile the form with angular's compiler and attach it to your page. This will result in dynamically created form with all the existing angular's validation and databinding features working just like with a static html. There is nothing I can think of that would prevent you from doing this via angular.widget api, but it's not a trivial task. Can you tell me more about your data structures? I wonder if having just a set of forms and using the right one at the right time wouldn't be sufficient. Why do you need the form creation to by completely dynamic and data-driven? link|edit|flag answered 7 hours ago Igor Minar 111

I am working on making a plugin system to enable 3rd parties to add components. I want them to be able to request user data but I dont want to give them access to the actual js or html of my page. Thus they need a flexible option to define the user input they require and should get an option for both client side data validation and server side validation. – Ed_ 6 hours ago  sweet. that sounds really good. can we move this discussion to our mailing list: groups.google.com/forum/?lnk=srg#!forum/angular the stack overflow text area is killing me. Just start a new thread there. We'll repost the final resolution on stack overflow afterwards. – Igor Minar 6 hours ago Sounds good to me. – Ed_ 3 hours ago

[Igor Minar]

I hacked up a incomplete solution here: http://jsfiddle.net/34y3b/

The entire html file is attached. It still needs a lot of work to make it perfect, but this should be enough to get you going.

/i

--
You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ed_]

Igor,

You are awesome, I didn't expect so much!

Edward

On Apr 2, 12:08 am, Igor Minar <iimi...@gmail.com> wrote:
> I hacked up a incomplete solution here:http://jsfiddle.net/34y3b/
>
> The entire html file is attached. It still needs a lot of work to make it
> perfect, but this should be enough to get you going.
>
> /i
>
>
>
>
>
>
>
> On Fri, Apr 1, 2011 at 9:55 PM, <edwardroberts...@gmail.com> wrote:
> > Referencing my question on

> >http://stackoverflow.com/questions/5508871/how-to-create-a-html-form-...

>
> > I am looking for a javascript lib which enables me to store (html) forms in
> > JSON format, with a bit of intelligence built into validate inputs client
> > side. Something like:
>
> > function FormController(){
>
> >   this.user = {
>
> >     name: 'John Smith',
>
> >     address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
>
> >     contacts:[{type:'phone', value:'1(234) 555-1212'}]
>
> >   };
>
> >   this.state = /^\w\w$/;
>
> >   this.zip = /^\d\d\d\d\d$/;
> > }
>

> > (This is taken fromhttp://docs.angularjs.org/#!cookbook.form). It's

> > almost what I want, as it offers basic client side validation with regular
> > expressions and you can provide defaults but it appears to still need you to
> > create the HTML form.
>
> > I want something that only requires the definition. Any ideas?
>
> > ..........
>
> >    Angular doesn't solve your problem out of the box because it asumes
> > that you have static html which you want to bind some data to.
>
> > Having said that you can use angular to fulfill your objectives. You can
> > create a new tag (angular widget) which will take a js object and
> > dynamically creates the form DOM along with all the angular validation
> > attributes. You then compile the form with angular's compiler and attach it
> > to your page. This will result in dynamically created form with all the
> > existing angular's validation and databinding features working just like
> > with a static html.
>
> > There is nothing I can think of that would prevent you from doing this via
> > angular.widget api, but it's not a trivial task.
>
> > Can you tell me more about your data structures? I wonder if having just a
> > set of forms and using the right one at the right time wouldn't be
> > sufficient. Why do you need the form creation to by completely dynamic and
> > data-driven?

> >   link<http://stackoverflow.com/questions/5508871/how-to-create-a-html-form-...>
> > |edit <http://stackoverflow.com/posts/5518921/edit>|flag
> >   answered 7 hours ago
> >  <http://stackoverflow.com/users/688293/igor-minar>
> >  Igor Minar <http://stackoverflow.com/users/688293/igor-minar>

> > 111
> >      I am working on making a plugin system to enable 3rd parties to add
> > components. I want them to be able to request user data but I dont want to
> > give them access to the actual js or html of my page. Thus they need a
> > flexible option to define the user input they require and should get an
> > option for both client side data validation and server side validation. –

> > Ed_ <http://stackoverflow.com/users/686884/ed> 6 hours ago

>
> > sweet. that sounds really good. can we move this discussion to our mailing
> > list: groups.google.com/forum/?lnk=srg#!forum/angular the stack overflow
> > text area is killing me. Just start a new thread there. We'll repost the

> > final resolution on stack overflow afterwards. – Igor Minar<http://stackoverflow.com/users/688293/igor-minar>
> >  6 hours ago
> >   Sounds good to me. – Ed_ <http://stackoverflow.com/users/686884/ed> 3

> > hours ago
>
> >  --
> > You received this message because you are subscribed to the Google Groups
> > "Angular" group.
> > To post to this group, send email to ang...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > angular+u...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/angular?hl=en.
>
>
>

>  dynform.html
> 4KViewDownload

[Igor Minar]

Let us know if you find this suitable for your project.

/i

[Niko]

Just tried to get the proposed solution up and running, it turns out that it really works nicely: Thanks Igor for putting together the fiddle. 

If I change the schema to be loaded from a REST service: the widget seems to start evaluating addressSchema before it is finished with loading...

What am I doing wrong here, or how to enforce that widget is not start to evaluate until the REST response is available?

Thanks,

Niko

    angular.service('ContentType', function($resource) {

        return $resource('/schema/myCntentType/form.json', {}, {

            query: {method: 'GET', params: {}, isArray: true}

        });

    });

    function DynFormCtrl(ContentType) {

        ...

        ContentType.query({}, function(schema) {

            self.addressSchema = schema;

            console.log("returned -> " + schema);

        });

        ...

    }

    angular.widget('my:form', function(element) {

        this.directives(true);

        return function(element) {

            console.log("input schema: " + element.attr('schema'));

            ...

    });

<div ng:controller="DynFormCtrl">

    <my:form ... schema="addressSchema" data="address"></my:form>

</div>

[ProLoser]

You should really take a look at my blog post: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks

I have a fiddle I wrote a while ago (as a demo to my company) that is a form-generator I built in 200 lines of angular js+html

http://jsfiddle.net/ProLoser/bp3Qu/light/

[Niko]

Very cool stuff, Dean!
Thanks for putting together those great fiddles.

As I was looking a second time the other day at my posted code, it was
becoming clear to me that the widget is simply earlier initialized in
the angular compile process and therefore the result of the AJAX call
is not available yet.

Anyways, thanks again,
Niko