AngularJS块Symfony2的形式提交按钮 [英] AngularJS blocks submit button in symfony2 form

查看：145 发布时间：2016/4/7 23:04:01 javascript php angularjs symfony2

本文介绍了AngularJS块Symfony2的形式提交按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Symfony2中创建的形式，这在端呈现按钮提交表格。当我添加 NG-应用=对myApp一切工作正常，但我不能提交表单这是此页面上。这是为什么，以及如何疏通呢？

FORM：

   - ＆gt;添加（本公司，选择，数组（
                '映射'=＆GT;假，
                ATTR'=＆GT;阵列（UI-选择2'=＆GT;'myarray的'，'NG-模式=＆GT;'form.company'，'NG选项'=＆GT;'option.value为entity.name_company实体在实体'，'NG-变化'=＆GT;'changeItem（））
            ））             - ＆gt;添加（'项目'，null，数组（
                ATTR'=＆GT;阵列（UI-选择2'=＆GT;'myArray2'，'NG-模式=＆GT;'form.task'，'NG选项'=＆GT;'option.value为entity.description_task在任务实体）
            ））

查看：

 ＆LT; HTML NG-应用=flowApp＆GT;
＆LT; HEAD＆GT;
    ＆LT;链接rel =stylesheet属性HREF ={{资产（'外部库/ SELECT2 / select2.css'）}}＆GT;
    ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-2.1.0.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC ={{资产（'外部库/ SELECT2 / select2.js'）}}＆GT;＆LT; / SCRIPT＆GT;
    ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC ={{资产（'外部库/ select2.js'）}}＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC ={{资产（'外部库/ app.js'）}}＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;风格＆GT;
                .select2选择题{宽度：220px; }
        ＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; DIV CLASS =容器NG-控制器=MainCtrl＆GT;
    {{表单（form）}}
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

SCRIPT：

  VAR应用= angular.module（'flowApp'，['ui.select2']）。配置（函数（$ interpolateProvider）{
        $ interpolateProvider.startSymbol（'{[{）endSymbol（'}]}'）;
    }
）;app.controller（'MainCtrl'，函数（$范围，$元，$ HTTP）{
    $ HTTP（{方法：GET，网址：'companies.json'}）。
        成功（功能（数据，状态，头，配置）{         $ scope.entities = data.entities;
         $ scope.form = {公司：$ scope.entities [0] .value的};
         console.debug（data.entities）;
    }）;
}）;

解决方案

文档说：

由于这个原因，角prevents的默认操作（表单提交
  到服务器），除非元素有一个action属性
  指定

这样你就可以行动属性添加到您的窗体。在我的例子我使用grenerateUrl功能，但是你应该生成你的当前路径的URL（其中生成表单控制器的路线）
  $数据=阵列（）;
            $形式= $这个 - ＆GT; createFormBuilder（$的数据，
                阵列（行动=＆GT; $这个 - ＆GT; generateUrl（route_to_curent_path））））
                 - ＆gt;添加（'场'，'文字'）
                 - ＆gt;添加（'提交按钮，提交）
                 - ＆GT; getForm（）;
 
编辑：
刚才发现，这是一个重复的问题<一href=\"http://stackoverflow.com/questions/24353796/form-will-not-submit-when-placed-inside-ng-app\">here和<一个href=\"http://stackoverflow.com/questions/17178686/why-doesnt-my-form-within-the-ng-app-directive-submit-angularjs\">here和<一个href=\"http://stackoverflow.com/questions/20069810/empty-action-attribute-on-a-form-with-angularjs?lq=1\">here
和 href=\"http://stackoverflow.com/questions/16945837/angular-js-submit-form-old-way?lq=1\">（此链接是最upvoted答案）
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)

这篇关于AngularJS块Symfony2的形式提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJS块Symfony2的形式提交按钮 [英] AngularJS blocks submit button in symfony2 form

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

AngularJS块Symfony2的形式提交按钮 [英] AngularJS blocks submit button in symfony2 form

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭