Angular 简单表单提交

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

Angular 简单表单提交

作者：迹忆客最近更新：2023/03/13 浏览次数：

虽然以常规的 HTML 格式提交表单非常简单，但对于 Angular 来说却是一项艰巨的任务。Angular 会不断中断表单提交，让你有机会在提交之前操作数据。

我们将研究能够在 AngularJS 上成功提交表单的方法。

首先，我们将看一下 ng-model 方法，它收集输入或文本区域中的所有数据，并将其制成用户可以查看的项目。

然而，ng-submit 方法让我们可以更好地控制我们提交的数据。如果输入中没有操作或项目，ng-submit 会阻止提交表单。

请记住，我们在这里处理的是 AngularJS，而不是常规的 Angular。因此，我们将主要使用 HTML 和 app.js。

在 Angular 中使用 `ng-model` 方法提交简单表单

对于 ng-model 方法，我们将像这样设置 HTML：

<div ng-app="myApp">
  <form name="saveTemplateData" action="#" ng-controller="FormCtrl">
    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 /><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="true" /> Already a
    member <input type="checkbox" ng-model="form.member" value="false" /> Not 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 />

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

然后在 app.js 中，我们编写以下代码：

import angular from 'angular';
import '@uirouter/angularjs';

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
  $scope.data = {
    firstname: 'default',
    emailaddress: 'default',
    gender: 'default',
    member: false,
    file_profile: 'default',
    file_avatar: 'default',
  };
  $scope.submitForm = function () {
    console.log('posting data....');
    $http
      .post(
        'http://posttestserver.com/post.php?dir=jsfiddle',
        JSON.stringify(data)
      )
      .success(function () {
        /*success callback*/
      });
  };
});

$scope.data 是存储所有数据以供提交的地方。

在 Angular 中使用 `ng-submit` 方法提交简单表单

ng-submit 提供的编码更少且简单。

对于 HTML：

<!DOCTYPE html>
<html>

    <head>

        <title>Form input text</title>

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

    </head>

    <body>

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

            <form ng-submit="submit(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>

       
	</body>

</html>

然后在 app.js 中：

import angular from 'angular';
import '@uirouter/angularjs';

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

app.controller('myCtrl', [
  '$scope',
  function ($scope) {
    $scope.submit = function (formData) {
      $scope.formData = formData;

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