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);
        } }
}