將@Input（）與Angular中的已定義列表匹配

Question

檢查用戶輸入是否在條目白名單中的最佳做法是什麼？

export class myClass { 
    @Input() type: string; 
} 

要設置type應該是，如果它是唯一可能在一個定義的列表，otherwhise它應該是空的。有沒有一種常見的方式與角或打字稿？

Answer 1

對@Input使用私有實例字段和getter/setter的組合。就像這樣：

export class myClass { 
    private validType: string; 

    @Input() 
    public set type(value: string) { 
     if(this.validate(value)) { 
      this.validType = type; 
     } else { 
      this.validType = ''; 
     } 
    } 

    public get type() { 
     return this.validType; 
    } 

    private validate(value: string) { 
     // do your validation here 
     return true; 
    } 
} 

這可以確保在每次輸入屬性發生變化，它越來越檢查了我的驗證方法（我用validate的名字在這個例子中）。如果你使用的是type屬性，你將會得到經過驗證的屬性validType。

如果您正在處理表單輸入，您應該爲此類任務明確定義自己的validator並將其應用於表單字段。