javascript - 如何在 Angularjs 中模拟 HTML 表单请求？

Question

我使用 Laravel 制作了一个应用程序，因此大部分页面使用简单的 HTML 表单发送 HTTP 请求。

我最近决定使用 Angular Material 来编写我的前端代码，但由于所有输入组件都强制使用 ng-model，我想使用 Angular Controller 来模仿简单的 HTML 表单提交的行为。

例如:我要这个

index.html

<form action="/confirm" method="POST">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

通过使用这个

index.html

<input type="text" name="name" ng-model="name">

<form action="/confirm" method="POST" ng-submit="submit($event)">
    <input type="submit" value="Submit">
</form>

应用程序.js

var app = angular.module('MyApp', []);
app.controller('AppController', ['$scope', function($scope){
    $scope.submit = function(e){
        e.preventDefault();
        var url = e.currentTarget.getAttribute('action');
        var data = {
            name : this.name
        };

        // Some code here that I can't figure out
        // Which will mimic the simple HTML Form Submission

    };
}]);

一个解决方案 是在表单内为表单外的每个输入附加一个隐藏的输入。我不想那样做，那样效率很低。

还有其他方法吗？谢谢。

如果有人知道如何处理文件输入，那就太好了。

Answer 1

Javascript:

app.controller("MainCtrl", ["$scope", "$http", function($scope, $http) {
  $scope.name = null;

  $scope.submitForm = function(name) {
    //submitting form items depend on what your /confirm endpoint is expecting
    //is it expecting JSON, form data in the body, etc?

    //JSON
    var payload = {
        name: name
    };

    //submitting via FormData
    //var payload = new FormData();
    //payload.append("name", name);

    //use $http to post to server
    $http.post('/confirm/', payload).then(function(response) {
        //success
    }, function() {
        //an error has occurred
    });
  }
}]);

HTML:

<form id="myForm" name="myForm" ng-submit="submitForm(name)">
    <!-- bind model to input using ng-model -->
    <input required type="text" ng-model="name" />
    <button ng-disabled="myForm.$invalid" type="submit" ng-click="submitForm(name)">Submit</button>
</form>