angular2-模板驱动表单

app.module.ts 导入 FormsModule

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 { }

一旦某个组件、指令或管道是属imports遭遇所导入的某某模块的,那便不能再管其还声称到比如模块的declarations数组中。 如果它是你自己写的,并且真属于即模块,才应该管其声明在declarations数组中。

 

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>

  

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 表单用它们注册控件。

 

经 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}}
  • 查阅输入框,但转变碰她:
     Bootstrap 1

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

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

  •  删除名字。Bootstrap 4

 

 (ng-valid | ng-invalid)这同对凡咱太感兴趣之。当数易得不行时,我们要生强力的视觉信号,
还眷恋使记出必填字段。可以透过入由定义 CSS 来提供视觉反馈

 

 输入框的左边上加带颜色之竖条,用于标记必填字段以及低效输入

Bootstrap 5

补充加少单样式来落实即时无异于功能

 

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

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

  

亮与隐藏验证错误信息

//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 前输入的名。
更换了骁连无见面重置控件的“全新”状态

 我们必须Bootstrap清除所有标记,在调用 newHero()法后调用表单的 reset()术即可  (click)=”newHero(); heroForm.reset()”

 

 提交表单

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

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

 

切换两独表单区域(额外的褒奖)

 把表单包裹上<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按钮时,这个只有念块消失了,可编制的表单重新出现了

 

相关文章