[Angular] Two way data binding event 的寫法

之前學的 two way binding 的寫法如下

[(ngModel)]

• html

<input type="text" name="firstName" [(ngModel)]="firstName">

今天要說明的是，如何把( )與[ ]分開寫，這樣就可以在使用者輸入的時候加入一些邏輯進入

將小括號( )另外寫

[(ngModel)]

• html

<input type="text" name="firstName" [ngModel]="firstName"(ngModelChange)= "firstName=$event">

那這樣寫有什麼好處呢? 就是當我們想要在使用者輸入的時候增加一些邏輯，我們就可以這樣寫。

例如:強制使用者第一個字輸入大寫，我們就可以改寫成這樣

ToUpperCase

• html
• ts

<input type="text" name="firstName" [ngModel]="firstName" (ngModelChange)= "firstLetterToUpperCase($event)">

export class AppComponent {

  firstName = '';
  firstLetterToUpperCase(value: string){
    if (value.length >0) {
      this.firstName = value.charAt(0).toUpperCase() + value.slice(1);
    }else{
      this.firstName = value;
    }
  }

}

我覺得這個小技巧還蠻不錯的，甚至可以拿來更改使用者的輸入內容，防止使用者打錯格式之類的