Angular 2 FromControlDirective指令和FromGroupDirective指令的使用

表单指令

           表单指令包含了一系列在Angular表单中常用的指令，这些指令分别包含在下面三个模块中:

•   FormsModule
•  ReactiveFormsModule
•  InternalFormsSharedModule

      FromControlDirective指令和FromGroupDirective指令 都包含于ReactiveFormsModule模块中,所有想要使用这两个指令应当首先在应用模块中引入ReactiveFormsModule模块。

     

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { myBackGround } from './aa.directive';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    myBackGround
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

      FromControlDirective指令可以将一个已有的 FormControl 实例绑定到一个 DOM 元素。

      FromControlDirective指令可以实现的的效果：将声明的loginControl 绑定一个输入元素，当输入元素的值变化时，loginControl 的值相应变化；同时，当loginControl的控件值发生变化时，输入元素的值也相应变化，实例代码如下：

     

<div>
  <form>
    <h2>FormControl 例子</h2>
    <p>绑定到 input 标签 : <input type="text" [formControl]="loginControl"></p>
    <p>活动input的值 : {{ loginControl.value }}</p>
  </form>
</div>

    

import {Component} from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'WebStorm NO.1!';
  private ccl: boolean;
  loginControl: FormControl = new FormControl('');
  
}

      FromGroupDirective指令的效果与FormControlDirective指令大致相似，只不过FromGroupDirective指令绑定的是一个表单组合的DOM元素，示例代码如下：

<div myBackGround [backgroundcolor]="color">
  <h2>FormGroup 例子</h2>
  <form [formGroup]="loginForm">
    <p>用户名: <input type="text" formControlName="name"></p>
    <p>密码: <input type="password" formControlName="pass"></p>
  </form>
  <pre>form的值 : {{ loginForm.value | json }}</pre>
</div>

  

import {Component} from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'WebStorm NO.1!';
  private ccl: boolean;
  loginControl: FormControl = new FormControl('');
  loginForm: FormGroup;
  constructor(){
    this.loginForm = new FormGroup({
        name: new FormControl(""),
        pass: new FormControl("")
      });
  }
}

      第一次写博客 如果写的不够好的话，请大家见谅。。。