AngularJS Forms「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」 Angula

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

AngularJS表格处理简介

AngularJS有一些功能，可以将HTML表单输入字段的数据绑定到模型对象（$scope）。这些功能使处理表单变得更加容易。

您可以使用ng-model指令将输入字段绑定到模型属性，如下所示：

<input type="text" id="firstName" ng-model="myForm.firstName">

此绑定是双向的，这意味着如果$scope.myForm.firstName在相应的控制器函数中设置了一个值，则输入字段将以该值开头。此外，一旦用户在文本字段中键入内容，该值将从文本字段复制到$scope.myForm.firstName属性中。

以下是您可以玩的完整AngularJS表单示例：

此示例将表单中的两个输入字段绑定到$scope.myForm.firstName和$scope.myForm.lastName属性。这两个属性在控制器函数中都有一个值集。这些值将在页面首次呈现时显示在输入字段中。当用户在文本字段中键入内容时，它也会被复制到这些属性中。

该示例还包含两个插值指令('{{}}')。这两个指令将插入' myForm. html '的值。firstName’和‘myForm。lastName '下面的表单字段。当你在文本框中输入内容时，它将被复制到“myForm”中。firstName’和‘myForm。lastName属性。从那里，它将被两个插值指令插入到HTML中。这个数据绑定发生在用户在表单字段中输入数据时，因此插值指令将在输入时更新值(这看起来很酷，但我不记得上次实际需要它是什么时候了

绑定复选框

如果您将复选框（<input type="checkbox">）绑定到模型属性，则选中复选框时模型属性将设置为true，如果没有，则设置为false。

如果你需要在模型中插入其他值而不是' true '和' false '，你可以使用' ng-true-value '和' ng-false-value '指令，像这样:

<input type="checkbox" ng-model="myForm.wantNewsletter"ng-true-value="yes" ng-false-value="no" >

绑定无线电按钮

单选按钮也很容易绑定到模型属性。如果您有一组单选按钮，只需将它们绑定到相同的模型属性即可。所选的单选按钮的值将复制到模型属性中。以下是一个例子：

<input type="radio" ng-model="myForm.whichNewsletter" value="weeklyNews"><input type="radio" ng-model="myForm.whichNewsletter" value="monthlyNews">

绑定选择框

将select框绑定到建模属性也相当简单。以下是一个例子：

ng选项

译文: 你可以让AngularJS根据来自' $scope '对象的数据创建选项元素，而不是使用静态HTML选项。你可以使用' select '元素中的' ng-options '指令来实现。下面是一个例子:\

ng-options指令遵循以下格式：

optionBinding expression   dataSource expression

dataSource expression指定了$scope对象中哪些数据将用作option元素的数据源。在上面的示例中，dataSource expression是以下部分：

for obj in myForm.options

它将obj定义为myForm.options数组中的每个对象。因此，将从$scope对象中的myForm.options数组中的每个元素生成一个option元素。

optionBinding expression指定要用作每个option元素的value和标签的属性。在上面的示例中，optionBinding是这部分：

obj.id as obj.name

这将每个对象的obj.id属性定义为生成的每个option元素的value，将obj.name属性定义为标签。如果您希望value和标签来自同一属性，只需省略as obj.name部分（表达式的标签部分）。

您可以从optionBinding expression和dataSource expression内部调用$scope对象上的函数。以下是一个例子：

obj.id as getLabelName(obj) for obj in getOptionArray()

此示例将使用从getLabelName(obj)函数调用返回的值作为标签，并将迭代getOptionArray()函数调用返回的对象。

你可以通过在' optionBinding '表达式中添加' group by '部分来创建选项组(' ' HTML元素，其中包含' option '元素)。下面是一个例子:

obj.id as obj.name group by obj.type

此示例将使用obj.type属性将生成的option元素分组到optgroup元素中，以确定要分组哪些option元素。theobjobj.type属性中值相同的对象将被分组到相同的optgroup元素中。

您还可以迭代对象的属性，而不是迭代对象数组。以下是一个例子：

propName as propValue for (propName, propValue) in objectWithProperties

此示例将把属性名称绑定为option元素value，将属性值绑定为$scope.objectWithProperties对象中的所有属性值和标签。

空选项

如果控制器函数为$scope对象中的选择框设置的值与任何option元素的value属性不匹配，AngularJS会在选择框中插入一个空option元素。

您可以通过在HTML中插入option元素来设置此空option元素的标签，如下所示：

  <form>
        <select ng-model="myForm.car"
                ng-options="obj.id as obj.name for obj in myForm.options" >
            <option value="">Please choose a car</option>
        </select>
    </form>

选择多个选项

如果您需要一个选择框，使用户能够选择多个选项，您需要在<select>元素中插入multiple="true"属性。

启用多个选项选择后，数据绑定将发生变化。现在，它不再将<select>元素绑定到单个字符串值，而是绑定到值数组。因此，您还使用数组设置所选值。以下是一个例子，表明：

表单验证

AngularJS有一套表单验证指令，您可以使用。AngularJS在将表单字段的值复制到绑定表单字段的$scope属性之前对其进行验证。如果窗体字段无效，则其值不会复制到绑定到的$scope属性中。相反，相应的$scope属性被清除。这样做是为了防止$scope属性包含无效值。

以下各节涵盖了每个表单验证指令。

ng-minlength + ng-maxlength

ng-minlength和ng-maxlength表单验证指令可用于验证表单字段中输入的数据长度。以下是一个例子：

本示例将ng-minglength设置为5，ng-maxlength设置为12。这意味着，如果输入字段中的文本长度小于5个或超过12个字符，则输入字段中的值将不会复制到$scope.myForm.name属性中。你可以自己试试这个例子，看看会发生什么。

注意显示$scope.myForm.name值的div元素。这将向您展示从文本字段复制到$scope.myForm.name属性的值。注意当文本字段包含少于5个或超过12个字符时，它是如何为空的。

ng模式

ng-pattern指令可用于根据正则表达式验证输入字段的值。以下是一个例子：

<input type="text" id="name" ng-model="myForm.name" ng-pattern="/^\d+$/"> Name <br/>

正则表达式必须遵循JavaScript正则表达式语法。此示例定义了一个正则表达式，该表达式与包含至少1位数字的数字字符串匹配。

ng-必填

ng-required指令检查窗体字段的值是否为空。事实上，您只需使用HTML5的required属性，AngularJS会自动检测它。

检查字段验证状态

如果您给<form>元素一个name属性，那么表单将作为属性添加到$scope对象中。以下是一个例子：

  <form name="myFormNg" ng-submit="myForm.submitTheForm()" >
  ...
  </form>

当您调用$scope对象上的函数（控制器函数添加到$scope对象的函数）时，您可以通过ngFormController对象的名称访问它，如下所示：

$scope.myFormNg

如果您向窗体内的窗体字段添加name属性，则其ngModelController对象将作为ngFormController对象上的属性访问。以下是一个例子：

  <form name="myFormNg" ng-submit="myForm.submitTheForm()" >
    <input name="firstName" type="text" ng-model="myForm.firstName">
  </form>

您现在可以像这样访问firstName输入字段的ngModelController：

$scope.myFormNg.firstName

ngFormController和ngModelController对象都包含一组属性，这些属性可以判断窗体或输入字段是否有效。这些属性是：

财产	描述
`$pristine`	如果表单没有更改（没有表单字段更改），则返回true；如果更改了某些字段，则返回false。
`$dirty`	`$pristine`的反面——如果表单没有更改，则为false；如果更改了，则为true。
`$valid`	如果表单字段（或整个表单=所有表单字段）有效，则为真。如果不是，也是假的。
`$invalid`	`$valid`的反面-如果字段（或表单中的所有字段）有效，则为false；如果字段（或 for中的单个字段）无效，则为真。

您可以使用这些属性在输入字段上设置匹配的CSS类。以下是一个例子：

注意' input '字段上的' ng-class '指令。该指令使用' myFormNg.name '作为参数调用' myForm.getFormFieldCssClass() '函数。这是' name ' ' input '元素的' ngModelController '。' myForm.getFormFieldCssClass() '只是以字符串形式返回匹配的CSS类

您还可以使用验证属性来显示或隐藏带有验证消息的div元素。以下是之前的表格，添加了div：

<div ng-controller="MyController" >
    <form name="myFormNg" ng-submit="myForm.submitTheForm()" novalidate>
    
        <input type="text" ng-class="myForm.getFormFieldCssClass(myFormNg.name)"
               id="name" name="name" ng-model="myForm.name" ng-minlength="2"> Name <br/>

        <div ng-show="myFormNg.name.$invalid">
            You must enter a valid name.
        </div>
    
    </form>
</div>

注意div元素上的ng-show指令。此指令使用myFormNg.name.$invalid验证属性的值来确定是否应该显示div。

请记住，您也可以访问ngFormController的$pristine、$dirty、$valid和$invalid属性。这些属性包含整个表单的验证状态。如果表单无效，此按钮代码示例将禁用提交按钮：

<button ng-disabled="myFormNg.$invalid">提交表格</button>

提交表格

您可以通过两种方式提交表格：

使用带有ng-click属性的button元素。
在form元素上使用ng-submit属性（方向）。

在这两种情况下，在$scope对象上调用JavaScript函数。您可以将此JavaScript函数附加到控制器函数中的$scope对象。JavaScript函数应通过AJAX将表单中的数据发送到您的服务器。

以下是在button元素上使用ng-click属性的表单：

注意ng-click属性如何指向myForm.submitTheForm()函数，并注意submitTheForm()函数如何附加到控制器函数内的$scope对象。

以下是使用ng-submit属性提交表单的相同表单：

如您所见，这两种机制非常相似。他们都在$scope对象上调用提交函数。