Wie man eine HTML Form Anfrage in Angularjs nachahmt?

Question

Ich habe eine App mit Laravel erstellt, so dass die meisten Seiten einfaches HTML-Formular verwenden, um HTTP-Anfragen zu senden.

Ich habe vor kurzem entschieden, Angular Material zu verwenden, um meine Front-End zu kodieren, aber da alle Input-Komponenten zwingt, ng-model zu verwenden, möchte ich das Verhalten der einfachen HTML Form Submission mit einem Angular Controller nachahmen.

Zum Beispiel: Ich möchte diese

index.html

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

Durch die Nutzung dieser

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> 

app.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 

    }; 
}]); 

Eine Lösung ist für jeden der Eingänge außerhalb der Form einen versteckten Eingang im Innern der Form anzuzuhängen. Ich möchte es nicht so machen, es wird sehr ineffizient sein.

Andere Möglichkeiten? Danke.

Und es wird toll sein, wenn jemand weiß, wie man das für eine Dateieingabe behandelt.

Answer 1

Sie konnten die $ HTTP-Dienst verwenden http Anrufe tätigen Sie Code wie dieser

var url = e.currentTarget.getAttribute('action'); 
var data = { 
    name : this.name 
}; 
$http({ 
    method: url, 
    url: '/confirm', 
    data:data 
}).then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
}, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
}); 

Answer 2

Javascript aussehen sollte:

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>