Implement Angular js form validation in Symfony 2

[vikas khairnar]

Hi,

Can you please suggest how to implement angular js form validation in Symfony 2.0 

Can you please give any example to implement it I have search but not found such example. eager to get replay, please help.

Thanks 

Vikas

[Mike Haas]

What exactly do you mean by this? Symfony's form validation happens server-side. With angular, you would be doing validation client-side. You could possibly create a bundle (if one doesn't exist) to abstract and then pull those validation rules from symfony and have them translated into some sort of angular validation rule.

[vikas khairnar]

Thanks Mike for your replay, Yes I want to do client side validation
using Angulajs,I am also new in Symfony so not able to know how to do
all things you suggested so if any example is there so it is good to
me to implement.

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "AngularJS" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/angular/cbTr4fGCzsY/unsubscribe?hl=en-US.
> To unsubscribe from this group and all its topics, send an email to
> angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[mark prades]

You can validate entities 

.you can get all entities errors back from the server as a json payload and display the errors in an angularjs app.

so :

client send json payload to server with form datas 

=> server build an entity from json data 

=> server validate entity 

=> if errors , server send error object back as a json payload 

=> if valid , persist entities

=> angularjs displays json datas.

[vikas khairnar]

Thanks for your replay Mark,

But I want to do Client side validation in symfony2 frame work using
Angular js not server side data will came from of json.

[E_lexy]

Hi Vicks,

That is how things worked in Symfony 1.

You'd define a form field with constraints defined in the form and the client side validation magically worked.

SF2 ditched all that magic and you are now left with how Mark said.

Yes this means duplicated code.

It would be nice if there were a plugin like the FOSJSrouting that translates the Symfony routing for use in JS, thus Angular.

By I haven't seen it yet, and no time to make it, for now anyway.

[dancras]

Hi Vicks,

This is more of a challenge for the Symfony2 community rather than Angular. I've been considering the same thing myself. The idea I have in my head is as follows:

Use symfony2 form events to add a listener when the form is being constructed / rendered. In the listener, fetch all the validation rules for the AbstractType, and for each of these, add an attribute to the form control (in addition to ng-model). The basic ones can be mapped to existing angular directives (eg ng-minlength) and others could follow a convention. It would then be easy to create directives for these attributes that interact with ng-model.

It would make a great start to an angular bundle.

[Vicks]

Hi,

Thanks for your replay, actually I am new in SF2 so not able to understand few things,

I have following form class and html (twing) can you please tell me how to add attributes and call listener while rendering form and validate it, please suggest.

    public function buildForm(FormBuilder $builder, array $options)

    {

        $builder

            ->add('name','text')

            ->add('email','email',array('required'=>false))

            ->add('address','textarea',array('required'=>false))

            ->add('city','text')

            ->add('state','text',array('required'=>false))

            ->add('country','entity',array(

'class' => 'csoftdemocsoftdemoBundle:Timezones',

'property'=>'country',

'query_builder' =>function(EntityRepository  $er) {

return $er->createQueryBuilder('timezones');

},

   'empty_value' => 'Choose one', 

)) 

->add('language','choice', array('choices' => array('en' => 'English', 'fr' => 'French')),array('required'=>false))

            ->add('telephone','text',array('required'=>false))

->add('acc_number','text',array('required'=>false))

            ;

    }

Twing file(html) =>

<form action="{{ path('customer_create') }}" method="post" name="form1" ng-controller="MainCtrl" {{ form_enctype(form) }} >

    {{ form_widget(form._token) }}

    <div>{{ form_label(form.name) }} {{ form_widget(form.name) }}

</div>

    <div>{{ form_label(form.email) }} {{ form_widget(form.email) }}</div>

    <div>{{ form_label(form.address) }} {{ form_widget(form.address) }}</div>

    <div>{{ form_label(form.city) }} {{ form_widget(form.city) }}</div>

    <div>{{ form_label(form.state) }} {{ form_widget(form.state) }}</div>

    <div>{{ form_label(form.country) }} {{ form_widget(form.country) }}</div>

    <div>{{ form_label(form.language) }} {{ form_widget(form.language) }}</div>

    <div>{{ form_label(form.telephone) }} {{ form_widget(form.telephone) }}</div>

<div>{{ form_label(form.acc_number) }} {{ form_widget(form.acc_number) }}</div>

      <br><br><br>  <button type="submit" style="float:left;text-align:left;margin-right:10px">{% trans %}Create{% endtrans %}</button>

</form>

[dancras]

I think the following will add an ng-model pointing to $scope.data.address. At that point you should get required validation for free:

{{ form_widget(form.address, { 'attr': {'ng-model': 'data.address'} }) }}

You could probably get a listener to do it to all of them without cluttering the view. Unfortunately I don't know how on the spot. Some links you might find helpful:

http://symfony.com/doc/2.1/book/forms.html
http://symfony.com/doc/2.1/cookbook/form/dynamic_form_modification.html
http://symfony.com/doc/2.1/cookbook/form/form_customization.html
https://github.com/symfony/symfony/blob/2.1/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig#L308

[vikas khairnar]

I need to add this error span <span class="error"
ng-show="form1.name.$error.required">required</span> into twing file
how should I add it?

[Vicks]

I am not able to validate input in twing file it doesn't show required span when form is loaded please suggest:

<input id="csoftdemo_csoftdemobundle_customertype_name" class="ng-pristine ng-invalid ng-invalid-required" type="text" ng-model="person.name" required="required" name="csoftdemo_csoftdemobundle_customertype[name]">

<span ng-show="myform.csoftdemo_csoftdemobundle_customertype_name.$error.required" style="display: none;">required</span>

app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.sendForm = function() {

    alert('form sent');

  };

  $scope.getClass = function(b) {

    return b.toString();

  }

  $scope.person = {"name":"","last":"visitor"}

});

[Kieran Simpson]

Vicks

1. The expression in ng-show uses the input name, not the id so it would be ng-show="myform.csoftdemo_csoftdemobundle_customertype[name].$error.required"
2. Once you update your ng-show expression correctly, you'll run into evaluation problems.  See http://thoughtdeprivedmusings.blogspot.com.au/2013/09/getting-symfony2-form-names-working.html on a solution.

Cheers,