简体   繁体   中英

AngularJS blocks submit button in symfony2 form

I have form created in symfony2, which at the end renders button to submit form. When I add ng-app="myApp" everything works fine, but I can't submit form which is on this page. Why is that and how to unblock this?

FORM:

->add('company','choice',array(
                'mapped' => false,
                'attr'=>array('ui-select2'=>'myArray', 'ng-model'=>'form.company','ng-options'=>'option.value as entity.name_company for entity in entities','ng-change' => 'changeItem()')
            ))

            ->add('project',null,array(
                'attr'=>array('ui-select2'=>'myArray2', 'ng-model'=>'form.task','ng-options'=>'option.value as entity.description_task for entity in tasks')
            ))

VIEW:

<html ng-app="flowApp">
<head>
    <link rel="stylesheet" href="{{ asset('external-libs/select2/select2.css')}}">
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="{{ asset('external-libs/select2/select2.js')}}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
    <script src="{{ asset('external-libs/select2.js')}}"></script>
    <script src="{{ asset('external-libs/app.js') }}"></script>
        <style>
                .select2-choice { width: 220px; }
        </style>
</head>
<body>
    <div class="container" ng-controller="MainCtrl">
    {{ form(form) }}
    </div>
</body>
</html>

SCRIPT:

var app = angular.module('flowApp', ['ui.select2']).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
    }
);

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


    $http({method: 'GET', url: 'companies.json'}).
        success(function(data, status, headers, config) {

         $scope.entities = data.entities;
         $scope.form = {company: $scope.entities[0].value };
         console.debug(data.entities);
    });
});

Well documentation says:

For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified

so you can add action attribute to your form. In my example i am using grenerateUrl function, but you should generate url of your current route(route of controller where the form is generated)

$data = array();
            $form = $this->createFormBuilder($data,
                array("action" => $this->generateUrl("route_to_curent_path"))))
                ->add('field', 'text')
                ->add('submitButton', 'submit')
                ->getForm();

EDIT: just now found out that this is a duplicate question here and here and here and here (this link being the most upvoted answer)

We need more informations, did you let browser validate form ? To remove :

{{ form(form, { 
    'attr': {
        novalidate,
    },
    }) 
}}

Maybe errors popup are hidden (happen with various complexe form fields)

When you said "i can't submit", is the submit button unable ? Errors happen after sumbission ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM