Angularjs - 简单的表单提交

Posted 2023-02-22

【中文标题】Angularjs - 简单的表单提交

【英文标题】：Angularjs - simple form submit

【发布时间】：2013-11-27 22:01:02

【问题描述】：

我正在经历 AngularJs 的学习曲线，我发现几乎没有任何示例可以用于现实世界。

我正在尝试清楚地了解如何提交具有最标准组件的表单并将其传递给 php 文件..

我的fiddle。

有没有人有任何关于提交简单、无污染的表单的好例子，可以帮助我以及可能许多其他 Angularjs 初学者..

当我说一个干净的形式时，我指的是这样的东西..

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
        Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>

        <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>

            <br/><br/>

        <input type="radio" ng-model="form.gender" value="female" />Female ...
        <input type="radio" ng-model="form.gender" value="male" />Male <br/>

            <br/><br/>

        <input type="checkbox" ng-model="form.member" value="5"/> Already a member

            <br/><br/>

        <input type="file" ng-model="form.file_profile" id="file_profile"><br/>
        <input type="file" ng-model="form.file_avatar" id="file_avatar">

            <br/><br/>

        <!-- <button ng-click="save()" >Save</button> -->
        <input type="submit" ngClick="Submit" >

    </form>

</div>

我的 ng-app 代码...

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) 

     var formData = 
        firstname: "default",
        emailaddress: "default",
        textareacontent: "default",
        gender: "default",
        member: false,
        file_profile: "default",
        file_avatar: "default"
    ;

    $scope.save = function() 
        formData = $scope.form;
    ;

    $scope.submitForm = function() 
        console.log("posting data....");
        formData = $scope.form;
        console.log(formData);
        //$http.post('form.php', JSON.stringify(data)).success(function()/*success callback*/);
    ;

 );

我想我从这里开始的三个问题是......

我的 php 文件应该如何与之交互（如何将 json 字符串放入 php 文件中的数组中）？ 当复选框为真时，我如何提交复选框的值？ 我发现很多关于使用 jQuery 和 Angular 提交图像的信息，我看到这个提交中已经有一个图像对象，我该如何检索这些数据？图片中应包含哪些注意事项？

我愿意拿出任何清晰简洁的资料，为大家整理一个很好的学习范例……

我的fiddle

【问题讨论】：

这是一篇相关的博客文章，我认为它有效地解释了一些基本的 AngularJS 和 html 表单交互：thebhwgroup.com/blog/2014/08/…。它没有涵盖您问题的提交部分，但它是实现目标的良好基础。

【参考方案1】：

警告这是针对 Angular 1.x 的

如果您正在寻找 Angular（v2+，当前版本 8），请试试这个 answer 或 official guide。

---

原始答案

我在这里重写了你的 JS 小提琴：http://jsfiddle.net/YGQT9/

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" name="form.firstname">    
        <br/><br/>

        Email Address: <br/><input type="text" ng-model="form.emailaddress"> 
        <br/><br/>

        <textarea rows="3" cols="25">
          Describe your reason for submitting this form ... 
        </textarea> 
        <br/>

        <input type="radio" ng-model="form.gender" value="female" />Female
        <input type="radio" ng-model="form.gender" value="male" />Male 
        <br/><br/>

        <input type="checkbox" ng-model="form.member" value="true"/> Already a member
        <input type="checkbox" ng-model="form.member" value="false"/> Not a member
        <br/>

        <input type="file" ng-model="form.file_profile" id="file_profile">
        <br/>

        <input type="file" ng-model="form.file_avatar" id="file_avatar">
        <br/><br/>

        <input type="submit">
    </form>
</div>

在这里，我使用了很多角度指令（ng-controller、ng-model、ng-submit），您使用的是基本的 html 表单提交。 通常，“角度方式”的所有替代方法都可以使用，但表单提交会被 Angular 拦截并取消，以允许您在提交前操纵数据

但是 JSFiddle 无法正常工作，因为它不允许任何类型的 ajax/http post/get，因此您必须在本地运行它。

有关 Angular 表单提交的一般建议，请参阅cookbook examples

更新食谱不见了。相反，请查看form submission 的 1.x 指南

Angular 的食谱有很多示例代码，因为文档不是很用户友好，所以会有所帮助。

Angularjs 改变了你的整个 Web 开发过程，不要尝试按照你习惯使用 JQuery 或常规 html/js 的方式做事，但对于你所做的一切，请查看一些示例代码，因为几乎总是有一个角度的选择。

【讨论】：

这太棒了。谢谢！如果我可能会问，您省略文本区域是否有特殊原因？我是否正确假设图像上传更复杂？根据我在网上找到的信息，很多人建议将 jQuery 与 ng-js 结合使用。

啊，不，我不小心漏掉了文本区域。是的，对于图片上传，您需要使用 ng-upload，我以前从未使用过它，但在 SO 上有一篇不错的帖子：***.com/questions/17216806/…。

Jquery 和 Angular 以非常不同的方式做类似的事情。当你绝对需要它时使用它（例如，我正在使用依赖于 JQ 的 HighCharts.js 图表库，并且没有很多可用的替代图形解决方案）。如果您习惯使用 JQ 进行开发，请先尝试找到有角度的方式来做事，然后再求助于 JQ。

感谢 LcLk。我对同时使用它们感到有点困惑。目前我会尽可能专注于掌握 ng，就好像我以前从未见过 jQuery 一样

在 JSFiddle 中，不应该是 $scope.form 而不是 $scope.data 吗？

【参考方案2】：

向某个服务页面发送数据。

<form class="form-horizontal" role="form" ng-submit="submit_form()">
    <input type="text" name="user_id" ng-model = "formAdata.user_id">
    <input type="text" id="name" name="name" ng-model = "formAdata.name">
</form>

$scope.submit_form = function()
            
                $http(
                        url: "http://localhost/services/test.php",
                        method: "POST",
                        headers: 'Content-Type': 'application/x-www-form-urlencoded',
                        data: $.param($scope.formAdata)
                    ).success(function(data, status, headers, config) 
                        $scope.status = status;
                    ).error(function(data, status, headers, config) 
                        $scope.status = status;
                    );
            

【参考方案3】：

我一直在做大量的研究，并试图解决一个不同的问题，我最终在我的另一篇文章中找到了解决方案的很大一部分：

Angularjs - Form Post Data Not Posted?

该解决方案目前不包括上传图片，但我打算扩展并创建一个清晰且运行良好的示例。如果可以更新这些帖子，我会一直更新它们，直到编译出一个稳定且易于学习的示例。

【参考方案4】：

我认为 AngularJS 对表单提交没有多说的原因是因为它更多地依赖于“双向数据绑定”。在传统的 html 开发中，您有一种数据绑定方式，即一旦 DOM 呈现您对 DOM 元素所做的任何更改都不会反映在 JS 对象中，但是在 AngularJS 中它可以双向工作。因此，实际上不需要表单提交。我已经使用 AngularJS 完成了一个中型应用程序，而无需提交表单。如果您热衷于提交表单，您可以编写一个指令来包装您的表单，该指令处理 ENTER keydown 和 SUBMIT 按钮单击事件并调用 form.submit()。

如果您想要此类指令的示例源代码，请通过评论告诉我。我想这将是一个您可以自己编写的简单指令。

【讨论】：

我也不是在谈论标准表单提交。我正在开发一个需要无数 xhr 请求的项目，我指的是从 DOM 向后端传递信息的稳定方式。如果您想共享代码，请随意。我知道两种方式绑定。

另外......我正在寻找将数据作为 json 从后端传递到 ng-js 范围的好例子......

【参考方案5】：

var app = angular.module( "myApp", [] );

app.controller( "myCtrl", ["$scope", function($scope) 

    $scope.submit_form = function(formData) 

        $scope.formData = formData;

        console.log(formData); // object
        console.log(JSON.stringify(formData)); // string

        $scope.form = ; // clear ng-model form

    

] );

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="submit_form(form)" >

        Firstname: <input type="text" ng-model="form.firstname" /><br />
        Lastname: <input type="text" ng-model="form.lastname" /><br />

        <hr />

        <input type="submit" value="Submit" />

    </form>

    <hr />          

    <p>Firstname:  form.firstname </p>
    <p>Lastname:  form.lastname </p>

    <pre>Submit Form:  formData  </pre>

</div>

Codepen