如果你现在正在运行该应用，你会看到选择控件中的超能力列表。由于尚未将这些 input 元素绑定到数据值或事件，因此它们仍然是空白的，没有任何行为。

把输入控件绑定到数据属性

下一步是使用双向数据绑定把输入控件绑定到相应的 ​Hero ​属性，这样它们就可以通过更新数据模型来响应用户的输入，并通过更新显示来响应数据中的程序化变更。

该 ​ngModel ​指令是由 ​FormsModule ​声明的，它能让你把模板驱动表单中的控件绑定到数据模型中的属性。当你使用双向数据绑定的语法 ​[(ngModel)]​ 引入该指令时，Angular 就可以跟踪控件的值和用户交互，并保持视图与模型的同步。

1. 编辑模板 ​hero-form.component.html​。
2. 找到 Name 标签旁边的 ​​ 标记。
3. 使用双向数据绑定语法 ​[(ngModel)]="..."​ 添加 ​ngModel ​指令。

TODO: remove this: {{model.name}}

这个例子中在每个 input 标记后面都有一个临时的诊断插值 ​{{model.name}}​，以显示相应属性的当前数据值。本提醒是为了让你在观察完这个双向数据绑定后删除这些诊断行。

访问表单的整体状态

当你导入了 ​FormsModule ​时，Angular 会自动为模板中的 ​​ 标签创建并附加一个 ​NgForm ​指令。（因为 ​NgForm ​定义了一个能匹配 ​​ 元素的选择器 ​form​）。

要访问 ​NgForm ​和表单的整体状态，就要声明一个模板引用变量。

1. 编辑模板 ​hero-form.component.html​。
2. 为 ​​ 标签添加模板引用变量 ​#heroForm​，并把它的值设置如下。

模板变量 ​heroForm ​现在是对 ​NgForm ​指令实例的引用，该指令实例管理整个表单。

3. 运行该应用。
4. 开始在 Name 输入框中输入。

在添加和删除字符时，你可以看到它们从数据模型中出现和消失。比如：

用来显示插值的诊断行证明了这些值确实从输入框流向了模型，然后再返回。

为控件元素命名

在元素上使用 ​[(ngModel)]​ 时，必须为该元素定义一个 ​name ​属性。Angular 会用这个指定的名字来把这个元素注册到父 ​​ 元素上的 ​NgForm ​指令中。

这个例子中为 ​​ 元素添加了一个 ​name ​属性，并把它的值设置为 “name”，用来表示英雄的名字。任何唯一的值都可以用，但最好用描述性的名称。

1. 为Alter Ego和Hero Power添加类似的 ​[(ngModel)]​ 绑定和 ​name ​属性。
2. 你现在可以移除显示插值的诊断消息了。
3. 要想确认双向数据绑定是否在整个英雄模型上都有效，可以在该组件的顶部添加一个带有 ​json ​管道的新文本绑定。​json ​管道会把数据序列化为字符串。

表单模板修改完毕后，应如下所示：

{{ model | json }}

  Name
  



  Alter Ego
  



  Hero Power
  
    {{pow}}
  

• 注意，每个 ​​ 元素都有一个 ​id ​属性。​​ 元素的 ​for ​属性用它来把标签匹配到输入控件。这是一个标准的 HTML 特性。
• 每个 ​​ 元素都有一个必需的 ​name ​属性，Angular 用它来注册表单中的控件。

如果你现在运行该应用并更改英雄模型的每个属性，该表单可能会显示如下：

通过表单顶部的诊断行可以确认所有的更改都已反映在模型中。

4. 你已经观察到了这种效果，可以删除 ​{{ model | json }}​ 的文本绑定了。

跟踪控件状态

控件上的 ​NgModel ​指令会跟踪该控件的状态。它会告诉你用户是否接触过该控件、该值是否发生了变化，或者该值是否无效。Angular 在控件元素上设置了特殊的 CSS 类来反映其状态，如下表所示。

此外，Angular 还会在提交时把 ​ng-submitted​ 类应用到 ​​ 元素上。这个类不会应用到内部控件上。

你可以用这些 CSS 类来根据控件的状态定义其样式。

观察控件状态

要想知道框架是如何添加和移除这些类的，请打开浏览器的开发者工具，检查代表英雄名字的 ​​

1. 使用浏览器的开发者工具，找到与 “Name” 输入框对应的 ​​ 元素。除了 “form-control” 类之外，你还可以看到该元素有多个 CSS 类。
2. 当你第一次启动它的时候，这些类表明它是一个有效的值，该值在初始化或重置之后还没有改变过，并且在该控件自初始化或重置后也没有被访问过。
3. 在 Name ​​ 框中执行以下操作，看看会出现哪些类。
• 查看，但不要碰它。这些类表明它没有被碰过、还是最初的值，并且有效。
• 在 Name 框内单击，然后单击它外部。该控件现在已被访问过，该元素具有 ​ng-touched​ 类，取代了 ​ng-untouched​ 类。
• 在名字的末尾添加斜杠。现在它被碰过，而且是脏的（变化过）。
• 删掉这个名字。这会使该值无效，所以 ​ng-invalid​ 类会取代 ​ng-valid​ 类。

为状态创建视觉反馈

注意 ​ng-valid​ / ​ng-invalid​ 这两个类，因为你想在值无效时发出强烈的视觉信号。你还要标记必填字段。

你可以在输入框的左侧用彩条标记必填字段和无效数据：

要想用这种方式修改外观，请执行以下步骤。

1. 为 ​ng-*​ CSS 类添加一些定义。
2. 把这些类定义添加到一个新的 ​forms.css​ 文件中。
3. 把这个新文件添加到项目中，作为 ​index.html​ 的兄弟：

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

4. 在 ​index.html​ 文件中，更新 ​​ 标签以包含新的样式表。

显示和隐藏验证错误信息

Name 输入框是必填的，清除它就会把彩条变成红色。这表明有些东西是错的，但是用户并不知道要怎么做或该做什么。你可以通过查看和响应控件的状态来提供有用的信息。

当用户删除该名字时，该表单应如下所示：

Hero Power 选择框也是必填的，但它不需要这样的错误处理，因为选择框已经把选择限制在有效值范围内。

要在适当的时候定义和显示错误信息，请执行以下步骤。

1. 使用模板引用变量扩展 ​​ 标签，你可以用来从模板中访问输入框的 Angular 控件。在这个例子中，该变量是 ​#name="ngModel"​。

模板引用变量（​#name​）设置为 ​"ngModel"​，因为 "ngModel" 是 ​NgModel.exportAs​ 属性的值。这个属性告诉 Angular 如何把引用变量和指令链接起来。

2. 添加一个包含合适错误信息 ​
   ​
3. 通过把 ​name ​控件的属性绑定到 ​
   ​ 元素的 ​hidden ​属性来显示或隐藏错误信息。
4. 为 ​name ​输入框添加一个有条件的错误信息，如下例所示。

Name


  Name is required

关于 "PRISTINE"（原始）状态的说明

在这个例子中，当控件是有效的（valid）或者是
原始的（pristine）时，你会隐藏这些消息。原始表示该用户在此表单中显示的值尚未更改过。如果你忽略了 ​
pristine ​状态，那么只有当值有效时才会隐藏这些消息。如果你把一个新的（空白）英雄或一个无效的英雄传给这个组件，你会立刻看到错误信息，而这时候你还没有做过任何事情。

你可能希望只有在用户做出无效更改时，才显示该消息。因此当 ​
pristine ​状态时，隐藏这条消息就可以满足这个目标。当你在下一步中为表单添加一个新的英雄时，就会看到这个选择有多重要。

添加一个新英雄

本练习通过添加模型数据，展示了如何响应原生 HTML 按钮单击事件。要让表单用户添加一个新的英雄，就要添加一个能响应 click 事件的 New Hero 按钮。

1. 在模板中，把 “New Hero” 这个 ​​ 元素放在表单底部。
2. 在组件文件中，把创建英雄的方法添加到英雄数据模型中。

newHero() {
  this.model = new Hero(42, '', '');
}

3. 把按钮的 click 事件绑定到一个创建英雄的方法 ​newHero()​ 上。

New Hero

4. 再次运行该应用，单击 New Hero 按钮。

表单会清空，输入框左侧的必填栏会显示红色，说明 ​name ​和 ​power ​属性无效。请注意，错误消息是隐藏的。这是因为表单处于原始状态。你还没有改过任何东西。

5. 输入一个名字，然后再次点击 New Hero。

现在，该应用会显示一条错误信息 ​Name is required​，因为该输入框不再是原始状态。表单会记住你在单击 New Hero 之前输入过一个名字。

6. 要恢复表单控件的原始状态，可以在调用 ​newHero()​ 方法之后强制调用表单的 ​reset()​ 方法以清除所有标志。

New Hero

现在单击 New Hero 会重置表单及其控件标志。

使用 ngSubmit 提交表单

用户应该可以在填写之后提交这个表单。表单底部的 Submit 按钮本身没有任何作用，但由于它的类型（​type="submit"​），它会触发一个表单提交事件。要响应此事件，请执行以下步骤。

1. 把表单的 ​ngSubmit ​事件属性绑定到一个 hero-form 组件的 ​onSubmit()​ 方法中。
2. 使用模板引用变量 ​#heroForm​ 访问包含 Submit 按钮的表单，并创建一个事件绑定。你可以把表示它整体有效性的 form 属性绑定到 Submit 按钮的 ​disabled ​属性上。

Submit

3. 运行该应用。注意，该按钮已启用 - 虽然它还没有做任何有用的事情。
4. 删除名称值。这违反了“必需”规则，因此会显示错误消息，并注意它还会禁用“提交”按钮。

你不必把按钮的启用状态明确地关联表单的有效性上。当 ​FormsModule ​在增强的表单元素上定义模板引用变量时，会自动执行此操作，然后在按钮控件中引用该变量。

响应表单提交

要展示对表单提交的响应，你可以隐藏数据输入区域并就地显示其它内容。

1. 把整个表单包裹进一个 ​
   ​ 中并把它的 ​hidden ​属性绑定到 ​HeroFormComponent.submitted​ 属性上。

  
Hero Form
  

     

  

• 主表单从一开始就是可见的，因为在提交之前，它的 ​submitted ​属性都是 false，正如 ​HeroFormComponent ​中的这个片段所显示的：

submitted = false;

onSubmit() { this.submitted = true; }

• 点击 Submit 按钮后，​submitted ​标志就变为 ​true​，表单就会消失。
2. 要在表单处于已提交状态时显示其它内容，请在新的 ​
   ​ 包装器下添加以下 HTML。

  
You submitted the following:
  

    
Name
    
{{ model.name }}
  
  

    
Alter Ego
    
{{ model.alterEgo }}
  
  

    
Power
    
{{ model.power }}
  
  

  Edit

这个 ​

​（用于显示带插值绑定的只读英雄）只在组件处于已提交状态时才会出现。
另外还显示了一个 Edit 按钮，它的 click 事件绑定到了一个清除 ​submitted ​标志的表达式。
单击 Edit 按钮，将显示切换回可编辑的表单。

总结

本页讨论的 Angular 表单利用了下列框架特性来支持数据修改，验证等工作。

• 一个 Angular HTML 表单模板
• 带 ​@Component​ 装饰器的表单组件类
• 绑定到 ​NgForm.ngSubmit​ 事件属性来处理表单提交
• 模板引用变量，比如 ​#heroForm​ 和 ​#name ​
• 双向数据绑定的 ​[(ngModel)]​ 语法
• ​name ​属性的用途是验证和表单元素的变更跟踪
• 用输入控件上的引用变量的 ​valid​ 属性来检查控件是否有效，并据此显示或隐藏错误信息
• 用 ​NgForm ​的有效性来控制 Submit 按钮的启用状态
• 自定义 CSS 类，为用户提供关于无效控件的视觉反馈

这里是该应用最终版本的代码：

• hero-form/hero-form.component.ts

import { Component } from '@angular/core';

import { Hero } from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;

  onSubmit() { this.submitted = true; }

  newHero() {
    this.model = new Hero(42, '', '');
  }
}

•  hero-form/hero-form.component.html

  

    
Hero Form
    

      

        Name
        
        

          Name is required
        
      

      

        Alter Ego
        
      

      

        Hero Power
        
          {{pow}}
        
        

          Power is required
        
      

      Submit
      New Hero
    
  

  

    
You submitted the following:
    

      
Name
      
{{ model.name }}
    
    

      
Alter Ego
      
{{ model.alterEgo }}
    
    

      
Power
      
{{ model.power }}
    
    

    Edit
  

• hero.ts

export class Hero {

  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }

}

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

• app.component.html
• app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

• main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

• forms.css

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

网站栏目：创新互联Angular教程：Angular构建模板驱动表单
URL地址：http://www.shufengxianlan.com/qtweb/news1/468851.html

成都网站建设公司_创新互联，为您提供网站设计公司、外贸网站建设、动态网站、定制网站、微信小程序、企业网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联