Angular 2创建表单

创建一个初始HTML表单模板，代码如下：

<div class = "container">
  <h1>网站表单</h1>
   <form>
     <div class = "form-group">
        <label for = "name">网站排名</label>
        <input type = "text" class = "form-control" id = "name" required>
     </div>
     <div class = "form-group">
         <label for = "alterEgo">alexa排名</label>
         <input type = "text" class = "form-control" id = "alexa">
     </div>
     <button type = "submit" class = "btn btn-default">提交</button>
    </form>
 </div>

required 属性设置的该字段为必须字段，如果没有设置则是可选。

显示效果如下：

 

使用ngModel进行双向数据绑定

接下来我们使用ngModel进行双向数据绑定，通过监听DOM事件来实现更新组件的属性。代码如下所示：

<div class="container">
  <h1>网站表单</h1>
    <form>
      {{diagnotic}}
      <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-cntrol" id="url" required
            [(ngModel)]="model.url" name="url">
           <option *ngFor = "let p of urls" [value]="p">{{p}}</option>
         </sellect>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

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

运行以上事例输出结果如下：

 

请使用手机"扫一扫"x