Web-Angular 表单和小部件

表单（Forms）

        在之前的单元中，你可能对 HTML 表单已经很熟悉了。本模块的一部分将重新介绍 HTML 表单，同时展示它们如何与 Angular 框架进行关联。你将看到 Angular 框架如何为传统的 HTML 表单添加了许多有趣的灵活性。

        表单是用户界面应用中重要的概念。表单将逻辑上连接的多个数据元素聚合在一起，并提供编辑支持，以便用户能够轻松输入正确的数据。在单个元素级别上，各种 web 系统支持许多小部件，以便用户轻松选择或输入数据，这些包括文本框、按钮、单选按钮、列表、复选框和其他小部件。在更高的级别上，可以使用由事件驱动的代码与分散在不同小部件中的数据进行一致性交叉检查，例如当用户输入数据或离开小部件时。在更高的级别上，表单有一个最终的提交机制，通常由一个按钮触发，当用户认为该表单的数据输入完整时。在此时，可以使用程序员代码进行更多的检查，并在处理数据之前向用户通知任何问题。处理可以在本地或远程服务器上进行。

        我们将从在 HTML 代码中标识的表单的概述开始本模块。然后，我们将看一下各个小部件以及它们如何使用 Angular 来为用户提供编辑支持。在以下主题中，我们将看一下表单数据和其他数据如何与远程服务器进行交互。

模板表单(Template forms)

        在Angular中，我们使用组件模板构建表单。如您所知，模板包含与Angular代码交织在一起的HTML代码，用于与Angular组件进行链接。表单嵌套在HTML的<form>标签中，这是比较简单的部分。复杂的处理在表单内部的部件中进行。

        Angular允许我们为每个部件创建引用变量。引用变量提供了一个Angular标识符，可以让我们访问每个字段中的属性（包括值）。引用变量可以引用多种类型的对象，但我们将介绍两种类型。引用变量只能在组件模板中访问。

        最简单的对象是引用DOM中的HTML5 HTMLInputObject。以下部件定义示例：

<label for="field2">Text Field 1</label>
<input #thefield type="text" class="form-control" id="field2" required [(ngModel)]="field2" name="field2"/>

        文本#theField是Angular的引用变量。该定义示例展示了我们稍后将看到的其他几个属性。name="field2"属性是用于标识部件的Angular名称，类似于HTML5代码中的for属性。class="form-control"属性将在后面用于向表单部件添加样式。

        要访问字段中的值，我们可以通过引用变量使用thefield.value来访问它。

        当引用变量分配了Angular的ngModel对象时，它会变得更加有趣。这为我们的Angular代码提供了额外的信息。以下是相同部件的另一个定义，它使引用变量指向Angular模型：

  <label for="field2">Text Field 1</label>
  <input #thefield="ngModel" type="text" class="form-control" id="field2" required [(ngModel)]="field2" name="field2"/>

        ngModel对象在我们的模板编码中有许多属性可用。其中一些包括：
          • touched/untouched - 用户已经/focused/未关注此字段的某个阶段
          • valid/invalid - 字段内容有效/无效
          • changed - 用户更改了字段
        我们还可以为表单本身使用引用变量。以下代码将引用变量分配给Angular ngForm对象，该对象相当于小部件的ngModule对象，但适用于表单。

  <form #myForm="ngForm">
    ...
  </form>

        ngForm对象有两个有用的属性（还有其他属性）：
          • valid - 当表单中的所有小部件都有效时为true
          • submitted - 用户已单击提交按钮（或其他等效按钮）
        要处理表单提交，通常我们会创建一个submit事件处理程序。可以使用Angular事件处理程序语法将其链接到Angular代码。例如，上述表单可以使用以下代码与名为onSubmit（）的组件成员函数连接。

  <form #myForm="ngForm">
    ...
  </form>

        事件处理程序中的代码可以简单或复杂，根据需要决定。然而，一般来说，事件处理程序中的代码越少越好。如果代码很少，通常意味着个别字段的代码会在输入数据时进行验证，这通常对用户更容易。另一方面，如果事件处理程序中有大量验证，当表单在多页上滚动时，用户可能很难找到有问题的小部件。

文本输入（Text Input）

        文本输入是大多数表单的基本功能。从以前的HTML经验中就能知道。熟悉以下HTML5中的文本字段定义：

  <label for="field1">Text Field 1</label>
  <input type="text" id="field1" required/>

        这并不是一个最小的定义。我们使用<label>标记，以使标签与字段关联，并且用户可以单击标签选择字段。for属性将标签绑定到输入字段，因为它与<input>标记中的id属性匹配。required属性是在提交操作之前需要文本输入的一个标志。

        现在，要将字段与我们的Angular代码链接起来，我们需要将小部件数据链接到Angular变量。我们在前一节中看到了如何做到这一点。

  <label for="field1">Text Field 1</label>
  <input type="text" id="field1" required [(ngModel)]="field2" name="field2"/>

        在这段代码中，我们使用了双向绑定将ngModel对象链接到名为field2的Angular变量上。该变量在组件类中定义。我们还使用name属性为字段分配了一个Angular名称。这是将字段链接到Angular运行时所必需的。

        一旦代码像上面那样链接了，我们可以将文本字段中的值作为程序的一部分使用。记住，双向绑定意味着我们可以在没有用户输入的情况下以编程方式更改文本值，同时也可以接收用户输入。以下资料提供了一些示例，说明如何在您的应用程序中使用它。

        在HTML5中还定义了许多类似文本的输入字段。这些字段允许浏览器或其他HTML容器使用小部件来帮助用户输入数据。最初只有一个密码字段，但在最新版本的HTML中添加了许多额外的字段小部件。不幸的是，许多浏览器对某些字段的小部件没有进行实现。在这些情况下，浏览器将恢复为普通的文本字段。从编程角度来看，这意味着即使一个浏览器中的小部件为我们验证了数据，我们仍然必须验证数据，因为另一个浏览器可能不会验证它。

        为了使用这些小部件，还有一些配置属性可以在输入字段中指定。其中一些有用的属性包括：

        min - 指定最小值
        max - 指定最大值
        step - 为小部件的增加/减少操作指定步长值

        下面的阅读中有一些示例。

        当然，我可以给你一些示例：

        1. 使用min和max属性的数字输入字段：

<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="0" max="120" />

        在这个示例中，用户只能输入0到120之间的数字作为他们的年龄。

        2. 使用step属性的范围输入字段：

<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" />

        在这个示例中，用户可以通过滑动条选择0到100范围内的音量，每次增减操作的步长为5。

        这些示例演示了如何使用min、max和step属性来配置输入字段。请注意，这些属性还适用于其他类型的输入字段，比如日期和时间字段。你可以根据具体的需求来使用这些属性来增强用户体验和限制输入的范围。

        一些常见问答：

        1. 问题：大部分示例中初始值都是空字符串，这会有问题吗？在Angular应用中如何解决？
   答案：如果输入需要特定的数据类型或验证，那么将空字符串作为初始值可能会有问题。在Angular应用中解决这个问题可以将输入的初始值设置为基于所需的数据类型或验证的默认值。例如，如果输入需要一个数字，你可以将初始值设置为0。

        2. 问题：数字和范围类型在Angular变量中如何存储数据？是文本还是数字值？
   答案：在Angular中，数字和范围类型会将数据存储为数字值。

        3. 问题：max、min和step属性如何在日期和时间小部件中起作用？
   答案：max、min和step属性通过对可选择的值设置约束来在日期和时间小部件中起作用。例如，如果将max属性设置为"2024-01-31"，用户将无法选择超过2024年1月31日的日期。min属性的工作方式类似，它设置一个最小日期。step属性用于设置可以更改值的增量。

        4. 问题：如果您有另一个浏览器可以访问，比如您的移动设备，在该页面上查看以查看生成的不同小部件。移动设备具有与触摸和鼠标界面相适应的相当不同的界面。
   答案：在移动设备上查看相同页面可能会生成不同的小部件，这是由于界面设计的差异。移动设备通常具有触摸界面，需要更大的按钮，并且对文本输入的依赖较少。因此，小部件可能会简化和优化以适应触摸输入。

按钮（Button）

        HTML应用程序中常用的按钮有三种类型。HTML5有两种形式的按钮作为单独的标签。此外，我们可以使HTML中的链接看起来像按钮。

        ＜button＞标记旨在用作独立的按钮定义。它可以以形式使用，但不建议这样做。

<button onclick="myFunction()">Click me</button>

        第二个按钮定义是<input-type=“button”>标记。这可以用作一个独立的按钮，但您可以看到简单的＜button＞标记更容易编码。<input>标记表单应该在表单中使用，因为文档声称它在浏览器和其他容器中实现得更一致。

<input type="button" value="Click me" onclick="myFunction()">

        按钮的最终形式是使超文本链接看起来像按钮。这是因为当用户点击链接时，页面会发生变化。这就像按下其他按钮一样，给人一种动作的感觉。为了使链接看起来像按钮，我们使用CSS样式在链接周围放置一个框架，以模拟正常的按钮外观。与主题相关联的网站在标题中使用这些链接。

<a href="#" class="button-link">Click me</a>

复选框（Checkboxes）

        复选框是一种简单的切换小部件，与 Angular 中的布尔值相连。与大多数 JavaScript 一样，该值为“真值”，这意味着零或 null 值被视为 false，任何其他值都被视为 true。但是，由于 Angular 变量可以被类型化，因此很容易将该值映射到声明为布尔类型的变量中。
一个简单的复选框定义是:

<label for="check2">选择或不选择：</label>
<input type=“checkbox” id=“check2” [(ngModel)]=“this.mychecked” name=“check2”/>

该定义使用标签来增加可点击目标。它还映射到一个名为 mychecked 的 Angular 变量，该变量可以在组件类中定义为:

myChecked: boolean;

        假设我们在 Angular 模板中按以下方式实现一个复选框：

<label for="Check1">你喜欢Angular吗？</label>
<input type="checkbox" id="Check1" required [(ngModel)]="likeAngular" name="like" />

        在组件类中需要声明什么？写下声明。

        正确答案是：

likeAngular: boolean;

        解析：
        在这个例子中，我们在组件类中需要声明一个名为 `likeAngular` 的变量，它的类型应该是布尔值(`boolean`)。这个变量用于保存复选框的选中状态。我们使用双向绑定(`[(ngModel)]`)将复选框的状态与这个变量关联起来，以便在组件中可以直接访问和使用复选框的选中状态。

        如果我们想要使用模板中的复选框状态来显示以下消息之一：

  User likes Angular: true or

  User likes Angular: false

        那么模板应该如何编写？

        正确答案是：

<p>User likes Angular: {{likeAngular ? 'true' : 'false'}}</p>

        解析：
        在模板中，我们使用插值表达式({{}})将复选框的状态变量 likeAngular 嵌入到字符串中来进行文本显示。我们使用三目运算符来根据 likeAngular 变量的值来选择要显示的文本。如果 likeAngular 为真，那么我们就显示 “true”，否则就显示 “false”。

单选按钮（Radio buttons）

        单选按钮是一组由 DOM 管理的按钮，一次只能有一个按钮被“按下”。通过将组件属性映射到每个单选按钮声明中与 name 属性关联的 DOM 值，它们与 Angular 变量相关联。
以下模板代码定义了一个包含三个按钮的单选按钮组。

  <label for="radio1">Red</label>
  <input type="radio" name="group2" id="Radio1"  [(ngModel)]="this.myRadio" value="R"/>
  <label for="radio2">White</label> 
  <input type="radio" name="group2" id="Radio2" [(ngModel)]="this.myRadio" value="W"/>
  <label for="radio3">Blue</label>
  <input type="radio" name="group2" id="Radio3" [(ngModel)]="this.myRadio" value="B"/>
  <p>Selection is: {{this.myRadio}}</p>

        在这里，组件类的 myRadio 属性通过双向赋值与每个单选按钮的值进行映射。我们可以在 Angular 代码中操作或初始化这个单选按钮组，如下面的阅读中所示。
我们还在下面的阅读中展示了如何使用 *ngFor 从组件数组中生成一个单选按钮列表，该数组包含单选按钮的标签和值。

列表（Lists）

        HTML5列表还可以链接到Angular变量。HTML5的`<select>`标签定义了一个下拉列表，也可以与Angular变量链接起来。
        列表通常包含用户可以选择的字符串，因此非常适合使用*ngFor指令。例如，假设我们定义了一个字符串数组作为组件属性，用于在下拉列表中使用：

  colours: string[] = ["", "red", "white", "blue"];

        我们可以使用这个属性在模板中生成一个下拉列表，代码如下：

  <label for="list2">List 1</label>
  <select #selectColour class="form-control" id="list2" required [(ngModel)]="list2" name="list2">
    <option *ngFor="let col of colours" [value]="col"> {{col}}</option>
  </select>

        这里，每个字符串都被赋值给选项的值，并且列表选项字符串也加载了相同的字符串。我们还将当前选定的值映射到list2组件属性。
下面的示例演示了上述列表的用法。

其他表单小部件(Other widgets)

        除了上述的表单小部件之外，HTML5还提供了几个可用于Angular模板中的其他表单小部件：

        1. `<textarea>` 标签定义了一个多行文本字段，也可以映射到一个单一的字符串变量。这与我们在文本输入字段中看到的代码非常相似。

        示例：

<label for="textareaInput">Textarea Input</label>
<textarea id="textareaInput" [(ngModel)]="textareaValue" name="textareaInput"></textarea>

        在这个示例中，我们创建了一个带有标签的多行文本输入框，并将其与一个组件属性textareaValue双向绑定。

        2. `<datalist>` 标签定义了一组可以在 `<input>` 元素中允许的值。这些在 Angular 中不是特别有用，因为它们类似于使用 Angular 数组初始化的下拉列表。然而，在某些浏览器中，它们可能看起来与下拉列表不同，并且列表可应用于除“文本”输入字段之外的其他类型。使用 *ngFor 指令可以很容易地生成一个 <datalist> 标签，就像前一节中展示的那样。

        示例：

<label for="datalistInput">Datalist Input</label>
<input list="colors" id="datalistInput" [(ngModel)]="datalistValue" name="datalistInput">
<datalist id="colors">
  <option *ngFor="let color of colors" [value]="color">{{color}}</option>
</datalist>

        在这个示例中，我们创建了一个带有标签的输入框，并使用<datalist>标签定义了一个值的列表。该列表通过*ngFor指令生成，并与组件属性colors相关联。

        3. `<keygen>` 标签生成用于提交操作的公钥和私钥。我们不会使用它们，但它们可以用于表单提交的一定程度的安全性。

        示例：

<label for="keygenInput">Keygen Input</label>
<keygen id="keygenInput" name="keygenInput">

        这个示例展示了一个简单的<keygen>标签，用于生成公钥和私钥。

        4. `<output>` 标签显示计算的结果，不可编辑。在 Angular 中，我们可以使用 Angular 赋值操作更新模板的一部分（例如，由 `<span id="xxx">` 标记定义），以实现相同的效果。

        示例：

<label for="calcInput1">Input 1</label>
<input type="number" id="calcInput1" [(ngModel)]="calcValue1" name="calcInput1">

<label for="calcInput2">Input 2</label>
<input type="number" id="calcInput2" [(ngModel)]="calcValue2" name="calcInput2">

<button (click)="performCalculation()">Calculate</button>

<p>Result: <output id="calcResult">{{ calculationResult }}</output></p>

        在这个示例中，我们创建了两个输入框和一个计算按钮。当用户点击计算按钮时，会调用performCalculation()方法进行计算，并将结果显示在一个<output>标签中。

        下面是一个 Angular 控件的定义示例：

<label for="field1">用户名:</label>
<input #userField type="text" id="field1" required [(ngModel)]="userID" name="user" />

        `#userField` 是模板代码中的一个名字，它可以在模板中的任何地方使用。

        `id="field1"` 属性将文本字段与标签相关联。

        组件属性 `userID` 保存文本字段中当前的值。