首页 > 其他 > 详细

[Angular2 Form] Reactive Form, FormBuilder

时间:2016-10-26 07:25:51      阅读:547      评论:0      收藏:0      [点我收藏+]

Import module:

import { NgModule } from @angular/core;
import { CommonModule } from @angular/common;
import { MessageComponent } from ./message.component;
import messageRoutes from ./message.routes;
import {FormsModule, ReactiveFormsModule} from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    messageRoutes
  ],
  declarations: [MessageComponent]
})
export default class MessageModule { }

 

Define the html:

<form [formGroup]="reactiveForm" novalidate autocomplete="off">
  <div class="form-field">
    <label>Title:</label>
    <input formControlName="title">
  </div>
  <div class="form-field">
    <label>Description:</label>
    <input formControlName="description">
  </div>
  <div class="form-field">
    <button type="submit">Submit</button>
  </div>
</form>

 

ts:


reactiveForm: FormGroup;
constructor(fb: FormBuilder) {
    this.reactiveForm = fb.group({
      title: [
        Title,
        [
          Validators.required,
          Validators.minLength(3)
        ]
      ],
      description: [
        Description,
        [Validators.required]
      ]
    })
  }
}

group() function take an object param, each object stands for a field in template, which refer to ‘formControlName‘.

      // title <-- formControlName="title"
      title: [
        Title, // <-- Default value
        [
          Validators.required,
          Validators.minLength(3)
        ] // <-- Validations
      ],

 

[Angular2 Form] Reactive Form, FormBuilder

原文:http://www.cnblogs.com/Answer1215/p/5998956.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!