【发布时间】：2014-07-18 14:55:46
【问题描述】：
我对 AngularJS 很陌生，正在尝试构建一个联系表单。我做了一些研究来验证角度，这很好用。但是将输入发送到我的电子邮件帐户仍然是一个谜。
HTML 片段
<form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
<p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
</div>
<!-- TEL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
<input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
<p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
</div>
<!-- TEXT -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
<textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
<p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">
<!-- <pre>
{{formData}}
</pre> -->
</form>
控制器
.controller('MainCtrl', function($scope, $http) {
this.features = keys;
$scope.submitForm = function(isValid) {
if (isValid) {
$scope.formData = {};
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
}
};
})
process.php 文件仍然是空的，因为我不太确定该放什么。
【问题讨论】：
-
无需使用
$.param。如果您正在学习 Angular，请直接从页面中取出 jQuery 库来开始 -
@charlietfl 好的，去掉“$”？
-
no.. 只需传递对象，Angular 将负责适当的序列化
标签： javascript php forms angularjs