前天確認了設定檔的格式,
是時候來補上一些其他的基本格式了,
之前我們只有加入輸入框的部分,
現在來加入一些比較特殊但也相當常用的元件
首先就是相當常使用到的下拉選單dropdown,
或許是說select,
這邊我們用html的select,
下拉選單的內容option由設定檔傳入,
從這邊開始應該就會很常用到option了,
像是checkbox跟radiobutton應該都會需要選項 ,
這邊會開始在設定檔裡面增加option,
裡面為具有label跟value的陣列
首先一樣在element下面增加base-select
ng g component base-select
然後寫一下基本的下拉選單
// base-select.component.ts ts的部分可以先跟其他base一樣
@Input() fieldSetting!: FieldSetting;
@Input() fieldObj!: any;
value!: string;
constructor() { }
ngOnInit(): void
{
this.value = this.fieldObj[this.fieldSetting.name];
}
valueChange()
{
this.fieldObj[this.fieldSetting.name] = this.value;
}
// base-select.component.html
<div>
<select (change)="valueChange()" [(ngModel)]="value">
<option *ngFor="let option of fieldSetting.options" [value]="option.value">
{{ option.label }}
</option>
</select>
</div>
在element.model裡面增加option的interface
export interface OptionItem
{
label: string;
value: string;
}
也調整設定檔的interface 增加options
export interface FieldSetting
{
name: string;
cname: string;
inputType: string;
placeholder: string;
required: boolean;
defaultValue?: string | undefined;
options?: OptionItem[]; //增加此項目
}
然後我們在main裡面增加一組下拉選單的設定
{
name: 'select1',
cname: '下拉選單1',
inputType: 'select',
placeholder: '請選擇',
required: true,
options: [
{ label: '選項1', value: '1' },
{ label: '選項2', value: '2' },
{ label: '選項3', value: '3' },
]
}
當然也不要忘了在field.component.html裡面增加base-select的模板
<div *ngSwitchCase="'select'">
<app-base-select
[fieldSetting]="fieldSetting"
[fieldObj]="fieldObj"
></app-base-select>
</div>
依循之前base的架構下,
增加select並沒有很困難,
接下來還會陸續補上checkbox跟radiobutton的部分,
另外ts的部分重複性也是滿高的,
等其他部分補完應該可以另外再做處理,
今天就先到這邊,剩下的明天再繼續
今日程式:day07