Angular 簡單表單提交
Oluwafisayo Oluwatayo
2023年1月30日
2022年4月20日
雖然以常規的 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
};
},
]);
Author: Oluwafisayo Oluwatayo
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn