angular 表单模块 Form

转载自  http://www.ngui.cc/news/show-106.html

Angular 中有两种表单：

Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )

Reactive Forms - 响应式表单

本小节主要介绍模板驱动式的表单，接下来我们来演示如何通过表单来为我们的之前创建的 UserComponent 组件，增加让用户自定义技能的功能。

基础知识

导入表单模块

import { FormsModule } from '@angular/forms';

// ...

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, UserComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

模板变量语法

<video #player></video>
<button (click)="player.pause()">Pause</button>

等价于

<video ref-player></video>

表单使用示例

@Component({
selector: 'sl-user',
template: `
...
<div *ngIf="showSkills">
<h3>我的技能</h3>
...
<form (submit)="addSkill(skill.value)">
<label>添加技能</label>
<input type="text" #skill>
</form>
</div>
` })

export class UserComponent {

// ...

addSkill(skill: string) {

let skillStr = skill.trim();

if (this.skills.indexOf(skillStr) === -1)

{ this.skills.push(skillStr);
} }
}