angular2-模板驱动表单

假使某些组件、指令或管道是属于imports中所导入的某部模块的,那就不能再把它再表明到本模块的declarations数组中。 假设它是你协调写的,并且确实属于当前模块,才应该把它证明在declarations数组中。

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

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

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

app.module.ts 导入 FormsModule

 提交表单

<form (ngSubmit)=”onSubmit()” #heroForm=”ngForm”>

<button type=”submit” class=”btn btn-success” [disabled]=”!heroForm.form.valid”>Submit</button>

 

呈现和潜伏验证错误音信

//template
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
  Name is required
</div>
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>


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

 

当控件是有效的
(valid)
全新的 (pristine)时,隐藏新闻。
“全新的”意味着从它被出示在表单中初露,用户还从未修改过它的值。

 input 成立了名为name的变量,并且赋值为
“ngModel”( 指令的 exportAs 属性告诉
Angular 怎样链接模板引用变量到指令。
那里把name设置为ngModel是因为ngModel指令的exportAs性格设置成了
“ngModel”)

 

点击 New Hero 按钮,表单被清空了。 输入框右侧的必填项竖条是戊戌革命的.

 

问题:

输入名字,再度点击 New Hero 按钮。
本次,出现了错误音信!为何?大家不愿意展现新(空)的强悍时,出现错误新闻。

选取浏览器工具审查那一个因素就会发觉,这么些 name 输入框并不是全新的。
表单记得大家在点击 New Hero 前输入的名字。
更换了勇敢并不会重置控件的“全新”状态

 大家不可能不清除全体标记,在调用 newHero()方法后调用表单的 reset()主意即可  (click)=”newHero(); heroForm.reset()”

 

由此 ngModel 跟踪修改情状与实用验证

ngModel能够拿走比仅使用双向数据绑定越多的控制权。它还会告诉大家许多消息:用户碰过此控件吗?它的值变化了啊?数据变得不行了呢?

NgModel 指令不仅仅跟踪状态。它还利用一定的
Angular CSS 类来更新控件,以呈现当前场馆。 可以动用那个 CSS
类来修改控件的外观,展现或潜伏新闻。

状态

为真时的 CSS 类

为假时的 CSS 类

控件被访问过。

ng-touched ng-untouched

控件的值变化了。

ng-dirty ng-pristine

控件的值有效。

ng-valid ng-invalid

 

例子:往姓名<input>标签上添加称呼 spy 的临时模板引用变量
然后用那个 spy 来展现它上边的兼具 CSS 类

<input type="text" class="form-control" id="name"
  required
  [(ngModel)]="model.name" name="name"
  #spy>
<br>TODO: remove this: {{spy.className}}
  • 查看输入框,但别碰它:
     图片 1

  • 点击输入框,然后点击输入框外面。: 图片 2

  •  在名字的末尾添加些斜杠。图片 3

  •  删除名字。图片 4

 

 (ng-valid | ng-invalid)这一对是大家最感兴趣的。当数码变得不行时,我们盼望产生强力的视觉信号,
还想要标记出必填字段。能够透过参预自定义 CSS 来提供视觉反馈

 

 输入框的右侧添加带颜色的竖条,用于标记必填字段和失效输入

图片 5

添加五个样式来贯彻这一意义

 

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

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

  

NgForm:

什么是NgForm命令?
但大家肯定没有添加过NgForm指令啊!

Angular替你做了。Angular会在<form>标签上机关创立并附加一个NgForm指令。

NgForm指令为form填补了有个别很是性子。
它会操纵那几个含有ngModel指令和name属性的要素,监听他们的性质(包罗其立竿见影)。
它还有团结的valid品质,那特个性唯有在它包蕴的各种控件都使得时才是真

<input>标签还添加了name属性
(attribute),并设置为 “name”,表示英豪的名字。
使用其余唯一的值都能够。

当在表单中使用[(ngModel)]时,必供给定义name属性。

在那之中,Angular
创制了一些FormControl,并把它们注册到NgForm指令,再将该指令附加到<form>标签。
注册每种FormControl时,使用name属性值作为键值

 

  • 各种 input
    成分都有id属性,label元素的for品质用它来同盟到相应的输入控件。

  • 各种 input 成分都有name个性,Angular 表单用它注册控件。

 

 

containerform-groupform-controlbtn类来自 Twitter
Bootstrap
。纯粹是装修。 我们选用Bootstrap 来标榜表单。

Angular 不需要containerform-groupform-controlbtn类,
或然外部库的其余样式。Angular 应用能够应用别的 CSS 库…… ,也许什么都并非

 

<form #heroForm="ngForm">

<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </div> <div class="form-group"> <label for="alterEgo">Alter Ego</label> <input type="text" class="form-control" id="alterEgo" [(ngModel)]="model.alterEgo" name="alterEgo"> </div> <div class="form-group"> <label for="power">Hero Power</label> <select class="form-control" id="power" required [(ngModel)]="model.power" name="power"> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div>

  

切换七个表单区域(额外的奖励)

 把表单包裹进<div>中,再把它的hidden本性绑定到HeroFormComponent.submitted属性。

<div [hidden]="submitted">
  <h1>Hero Form</h1>
  <form (ngSubmit)="onSubmit()" #heroForm="ngForm">

  </form>
</div>

发端正是可知的,因为submitted属性是 false,直到提交了这么些表单。

submitted = false;

onSubmit() {
this.submitted
= true; }

当点击
Submit 按钮时,submitted标志会变成
true,并且表单像预想中一样没有了

 

当表单处于已交由状态时,要求展现一些别的东西。
在刚刚写的<div>卷入下方,添加下列 HTML
语句:

<div [hidden]="!submitted">
  <div class="row">
    <div class="col-xs-3">Name</div>
    <div class="col-xs-9  pull-left">{{ model.name }}</div>
  </div>
  <button class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>

当点Edit按钮时,这几个只读块消失了,可编写制定的表单重新出现了

 

相关文章