如何驗證輸入字段以僅采用Angular 6中的顏色值

Question

我正在使用MEAN Stack和Angular 6實現一個Web應用程序。這里有一個輸入字段，它從ngx-colorpicker獲取顏色值。 但是這些輸入字段也允許我進行文本輸入。 如果使用<input type= 'color'>則它將打開一個單獨的顏色選擇器，並且如果選擇一種顏色，則該顏色選擇器僅適用於文本字段的中間部分。 我要防止在這些輸入字段中輸入文本或數字。 有誰有主意嗎？

這是我的輸入字段。

<input type="text" nbInput [(colorPicker)]="colorRangeTraceArc" [cpPosition]="'right'" [cpOutputFormat]="'rgba'[style.background]="colorRangeTraceArc"
    formControlName="colorRTC" name="colorRangeTraceArc" style="width: 100px" (colorPickerChange)="onChangeColorRTA($event)" />

Answer 1

嘗試在文本框中使用keydown事件來阻止文本框中的任何輸入。

這是HTML代碼：

(keydown)="keyDown($event)"

這是TS代碼：

 keyDown(event:any){
    return false;
  }

請檢查stackbliz示例中的第一個文本框。