AngularJS - 表單

你好，有抱負的程式設計師們！今天，我們將要進入AngularJS表單的精彩世界。作為你們親切友善的電腦科學老師，我將引導你們踏上這個旅程，一步步前進。如果你是程式設計新手，不必擔心——我們會從基礎開始，逐步提升。所以，來一杯咖啡（或你喜歡的飲料），我們開始吧！

AngularJS - Forms

了解 AngularJS 表單

在我們深入細節之前，讓我們先討論一下表單在網頁開發中的重要性。想像你正在線上訂購披薩——你需要輸入你的名字、地址和披薩偏好，對吧？那就是表單的用處！它是用戶和網頁應用程序之間的橋樑，允許數據輸入和交互。

AngularJS，我們的超級英雄框架，讓處理表單變得輕鬆。它提供了強大的工具，可以輕鬆地創建、管理和驗證表單。讓我們一一探索這些功能。

AngularJS 表單中的事件

事件就像是你的網頁應用程序的脈搏。它們是當用戶與你的表單交互時發生的動作——點擊按鈕、在文本框中打字或從下拉菜單中選擇一個選項。

常見表單事件

以下是在AngularJS中常見的表單事件表：

事件	描述
ng-submit	當表單被提交時觸發
ng-click	當元素被點擊時觸發
ng-change	當輸入框的值改變時觸發
ng-focus	當元素獲得焦點時觸發
ng-blur	當元素失去焦點時觸發

讓我們看一個如何使用ng-submit事件的簡單例子：

<form ng-submit="submitForm()">
<input type="text" ng-model="user.name">
<button type="submit">提交</button>
</form>

在這個例子中，當表單被提交時，它會調用AngularJS控制器中的submitForm()函數。這個函數然後可以按需處理表單數據。

ng-click 的力量

現在，讓我們聚焦於最常用的事件之一：ng-click。這個小指令就像一根魔法棒，讓元素變得交互式。

以下是一個簡單的例子：

<button ng-click="sayHello()">說你好</button>

$scope.sayHello = function() {
alert("你好，AngularJS！");
};

當你點擊這個按鈕時，它會調用sayHello()函數，顯示一個帶有友好問候的彈窗。就是這麼簡單！

但是ng-click可以做更多的事情。讓我們看一個更實用的例子：

<div ng-controller="CounterController">
<p>計數：{{count}}</p>
<button ng-click="increment()">+</button>
<button ng-click="decrement()">-</button>
</div>

app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});

在這個例子中，我們創建了一個簡單的計數器。每次點擊"+"按鈕，它會增加計數，每次點擊"-"按鈕，它會減少計數。這展示了ng-click如何用於實時更新數據。

驗證數據：保持事物的乾淨和整齊

現在我們知道了如何處理事件，讓我們來谈谈數據驗證。這就像在俱樂部裡有一個保鏢——我們希望只有正確的數據能進來！

AngularJS提供了內置的表單驗證功能。讓我們看一個例子：

<form name="myForm" ng-submit="submitForm()" novalidate>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="myForm.userName.$touched && myForm.userName.$invalid">
請輸入你的名字。
</span>

<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="myForm.userEmail.$touched && myForm.userEmail.$invalid">
請輸入一個有效的電子郵件地址。
</span>

<button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form>

在這個例子中，我們使用了AngularJS的內置驗證指令：

required：使字段變為必填
ng-show：當條件滿足時顯示錯誤信息
$touched：檢查字段是否已經被交互
$invalid：檢查字段的值是否無效
ng-disabled：如果表單無效，則禁用提交按鈕

這樣，我們可以確保用戶在提交表單之前提供有效的數據。這就像有一個熱心的助手再次檢查一切！

準備好一切：一個完整的例子

現在，讓我們把我們學到的所有東西結合成一個完整的例子。我們將創建一個帶有驗證和事件处理的簡單註冊表單。

<div ng-controller="RegistrationController">
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<label>名字：</label>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="registrationForm.userName.$touched && registrationForm.userName.$invalid">
請輸入你的名字。
</span>

<label>電子郵件：</label>
<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="registrationForm.userEmail.$touched && registrationForm.userEmail.$invalid">
請輸入一個有效的電子郵件地址。
</span>

<label>年齡：</label>
<input type="number" name="userAge" ng-model="user.age" min="18" required>
<span ng-show="registrationForm.userAge.$touched && registrationForm.userAge.$invalid">
你必須至少18歲。
</span>

<button type="submit" ng-disabled="registrationForm.$invalid">註冊</button>
</form>

<div ng-show="formSubmitted">
<h2>歡迎，{{user.name}}！</h2>
<p>你的電子郵件是：{{user.email}}</p>
<p>你的年齡是：{{user.age}}</p>
</div>
</div>

app.controller('RegistrationController', function($scope) {
$scope.user = {};
$scope.formSubmitted = false;

$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
$scope.formSubmitted = true;
console.log('表單提交：', $scope.user);
} else {
alert('請修正表單中的錯誤。');
}
};
});

輸出和幕後發生的事情

當你運行這段代碼時，你會看到一個有三個字段：名字、電子郵件和年齡的表單。當你與表單交互時，你會注意到：

當你觸碰一個字段並離開它時，如果它是空的或輸入了無效的數據，會出現錯誤信息。
"註冊"按鈕會在所有字段有效之前保持禁用狀態。
當你成功提交表單時，會出現一個帶有你輸入信息的歡迎信息。

在幕後，AngularJS正在發揮它的魔力：

ng-model指令將輸入字段绑定到$scope.user對象上的屬性。
驗證指令（required、type="email"、min="18"）確保數據的完整性。
ng-show指令條件性地顯示錯誤信息。
ng-disabled指令防止在數據無效時提交表單。
ng-submit指令處理表單提交，調用我們的submitForm()函數。
在控制器中，我們檢查表單是否有效，然後處理數據。

這就是全部！你剛剛使用AngularJS創建了一個完整的、經過驗證的表單。記住，熟能生巧，所以不要害怕嘗試不同的表單元素和驗證規則。

當我們結束這個課程時，我希望能夠讓你對在AngularJS中處理表單感到更有信心。記住，每個偉大的開發者都是從初學者開始的，所以持續練習和探索。在你意識到之前，你將能夠輕鬆地建立複雜的、交互式的網頁應用程序！

未來的技術巫師們，快樂編程！

Credits: Image by storyset