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("") }); } }

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