最近在學習angular2，入門小白。

雙向繫結機制早就用過，但是沒有更好地往裡面探究。

今天系統學習，發現這機制很厲害。

雙向繫結用[()]來表示，一般是繫結ngModel屬性，用法是：[(ngModel)]="username"。

[]是單向繫結，就是說我們在元件中給model賦的值會設定到HTML的input控制元件中。

[()]是雙向繫結，就是說HTML對應控制元件的狀態改變會反射設定到元件的model中。

下面是例子：

這是元件：

<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
  <!--[(ngModel)]="username"
 
中[()]是雙向繫結的意思：HTML中的對應控制元件的狀態改變會反射設定到元件的model中-->
  <!--required要求該表單不為 空-->
  <!--minlength最小長度-->
  <!--這裡雙向繫結之後還加了引用#usernameRef，是因為要在模板中使用才加入，一般要加。-->
<input class="ng-pristine ng-invalid ng-touched" type="text" [(ngModel)]="username" #usernameRef="ngModel"
         name="username" required minlength="2"/>
 
  <!--{{usernameRef.errors|json}}-->
  <div *ngIf="usernameRef.errors?.required">必填項</div>
  <div *ngIf="usernameRef.errors?.minlength">最少字數沒達到</div>
  <input type="password" [(ngModel)]="password" #passwordRef="ngModel" name="password" required/>
  <!--{{passwordRef.valid}}-->
 
  <div *ngIf="passwordRef.errors?.required">必填項</div>
  <button (click)="onClick()">login</button>
  <button type="submit">Submit</button>
</form>

模板：

export class LoginComponent implements OnInit {
//學習雙向繫結和表單驗證
//需要在類中同樣定義變數，但由於雙向繫結機制，會調取元件中的內容
username = "";
password = "";
constructor(@Inject('auth') private service, @Inject('url') private url) {
  }
ngOnInit() {
  }
onClick() {
console.info("service+" + this.service.loginWithCredentials(this.username, this.password));
console.info("service+" + this.username + ",and," + this.password);
console.info(this.url);
  }
onSubmit(formValue) {
console.info(formValue)
  }
}

在元件中定義的[(ngModel)]="username" 會把這個input標籤的狀態反射設定到元件的model中，就是意味著這裡設定的username值會賦到model中設定的username="";這個username中！（這裡會預設使用input標籤的value屬性）。

我們可以在username這個input輸入值的時候看到控制檯如下：

這個ng-reflect-model=“123”是我在input中輸入的值。這就是雙向繫結的機制造成的，把輸入的值放到一個自定義的標籤屬性中。可以檢視下普通的input標籤在輸入值之後是不會把值放到"value"這個屬性中的。

[(ngModel)]="username" 不能代替form標籤中的name=“username”。

最後介紹引用：

我們可以看到元件中有#usernameRef="ngModel"，這是元件中其餘部分對這個元件的ngModel進行引用時使用的。注意，是元件的其餘部分對該元件進行引用時使用的，"#"開頭的都是引用，但一般用Ref結尾。一般可以用來作為表單驗證，onClick傳值（有了雙向引用，一般不使用這種方式傳值）。

有所不足，請批評指教。