Angular 2 表单模型绑定 - 学习 AngularJS 2

上一章节中我们已经学习了如何用组件和模板构建一个 Angular 表单

但这个表单还没有和我们的模型进行绑定，本章我们就来完善这些功能

我们使用 ngModel 进行双向数据绑定，通过监听 DOM 事件，来实现更新组件的属性

修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型

<div class="container">
    <h1>网站表单</h1>
    <form>
      {{diagnostic}}
      <div class="form-group">
        <label for="name">网站名</label>
       <input type="text" class="form-control" id="name"
         required
         [(ngModel)]="model.name" name="name">
      </div>
      <div class="form-group">
        <label for="alexa">alexa 排名</label>
         <input type="text"  class="form-control" id="alexa"
         [(ngModel)]="model.alexa" name="alexa">
      </div>
      <div class="form-group">
        <label for="url">网站 URL </label>
        <select class="form-control"  id="url"
                required
                [(ngModel)]="model.url" name="url">
          <option *ngFor="let p of urls" [value]="p">{{p}}</option>
        </select>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

上面的代码中

每一个 input 元素都有一个 id 属性，它被 label 元素的 for 属性用来把标签匹配到对应的 input
每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器
{{diagnostic}} 只是用于测试时候输出数据使用

刷新浏览器，我们可以看到如下输出内容