Angular 自定義表單控制項

分享乙個最近寫的支援表單驗證的時間選擇元件。

import  from "@angular/core";

import  from "@angular/forms";
@component(}}`,
styles: [`
:host
#container
#input_box
#panel
.title
.item
.item:hover, .item.selected
`],providers: [
]})export class timepicker implements controlvalueaccessor, oninit, afterviewinit
ngoninit()else
this.hours.push(h);
}for(let j = 0; j < 60; j++)else
this.minutes.push(m);}}
ngafterviewinit());
}onchange = (time: string) => {};
ontouched = () => {};
get value(): string
set value(val: string)
}/**
* 實現controlvalueaccessor中的方法，用於將model顯示到view
* @param val
*/writevalue(val: string): void
if(this._value)
}/**
* 實現controlvalueaccessor中的方法，用於通知angular值已被修改
* @param fn
*/registeronchange(fn: (time: string) => void): void
/*** 實現controlvalueaccessor中的方法，用於通知angular輸入框被滑鼠聚焦過
* @param fn
*/registerontouched(fn: () => void): void
/*** 隱藏選擇面板
*/hide()
/*** 顯示選擇面板
*/show()
/*** 輸入框獲得焦點
* @param event
*/oninputfocus(event)
/*** 輸入框失去焦點
*/oninputblur()
/*** 輸入框點選
* @param event
*/oninputclick(event)
/*** 選擇小時
* @param h
* @param event
*/onhourclick(h, event)
}/**
* 選擇分鐘
* @param min
* @param event
*/onminuteclick(min, event)
}}

angular 自定義指令

模板 var mymodule angular.module mymodule mymodule.directive directivename function return restrict string,template string,templateurl string,priority n...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...

自定義控制項

首先是以下這幾項，attribute defaultproperty指定元件的預設屬性，toolboxdata指定當從ide工具中的 工具箱中拖動自定義控制項時為它生成的預設標記 defaultproperty text toolboxdata mycontrol runat server 上面這些...