angular4.x from《一》

angular4.x 表单学习

• 模版表单
• 响应式表单

---

Markdown及扩展

首先在app.ts中 引入FormsModule和ReactiveFormsModule，angular为我们提供了两种表单，模版是表单和响应式表单

模版表单

<form action="">
   <div>用户名:<input type="text" name="username"/></div>
   <div>密码：<input type="text" name="password"/></div>
   <div>确认密码:<input type="text" name="confirmpass"/></div>
   <div>电话：<input type="text" name="mobile"/></div>
   <div><input type="submit" value="提交"/></div>
</form>

这是传统的表单

//使用ngForm angular 会接替原来的表单
<form #myForm = "ngForm" (ngSubmit) = "onSubmit(myForm.value)">
//在ngsubmit中我们会拿到表单绑定的值
   <div>用户名:<input ngModel type="text" name="username"/></div>
//绑定一组   
   <div ngModelGroup="passwordGroup">
      <div>密码：<input ngModel type="password" name="password"/></div>
      <div>确认密码:<input ngModel type="password" name="confirmPass"/></div>
   </div>
   <div>电话：<input ngModel type="text" name="mobile"/></div>
   <div><input type="submit" value="提交"/></div>
</form>

模版表单 效果预览

定制化表单

FormsBuilder

使用ngForm 和ngControl（隐）的方式的确很方便 但是缺不能够达到定制的效果，是一种更为灵活的方式

<form [formGroup]='myForm' (ngSubmit)='onSubmit(myForm.value)' class='ui form'>
      <div class='field'>
        <label for='sku'>sku</label>
        <input type='text' [formControl]='myForm.controls["sku"]'>
      </div>
      <button type='submit' class='ui button'>submit</button>
  </form>

 public myForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'sku': ['123213']
    });
  }