angular 创建最简单的输入框Form

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

Angular Forms 简介

Angular 4 中有两种表单：

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

• Reactive Forms - 响应式表单

本文主要介绍 Template Driven Forms (模板驱动式表单) 的基础知识，相关的知识点会以问答的形式进行介绍。

如何实现双向绑定？

在 Angular 表单中，我们通过 ngModel 指令来实现双向绑定。

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

 @Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="username"> {{username}}
  `, }) 

export class AppComponent {
  username = 'semlinker';
}