昨天我們處理完分頁
現在來把檢核的部分套上去
我們昨天有處理form表單的部分
檢核的部分其實昨天有寫一點
不過沒有特別解釋到

// form-input.component.ts
this.pageSetting.form = this.fb.group(this.pageSetting.fieldSettings.reduce((acc: any, item) =>
{
    acc[item.name] = [item.defaultValue || ''];
    if (item.validator && item.validator.length > 0)
    {
        acc[item.name].push({ validators: item.validator })
    }
    return acc;
}, {}));

這邊原本只有塞值
因為設定檔加了檢核validator
所以這邊在用formBuilder塞值的時候
判斷如果有validator會直接增加進去
原本formBuilder只有增加值的格式是['value']
如果要再增加檢核就是 ['value',{validators:[Validator.required]]這樣的格式
於是乎我們直接把設定檔內寫成陣列直接放到validators裡面
這樣我們就可以在每一頁透過每一頁的設定檔產生具有檢核功能的form表單

然後我們在main的上下一頁的地方增加檢核控制

    pageNext()
    {
        // 檢核沒通過的時候阻止往下一頁
        if (this.pageSettings[this.page].form?.invalid) return;
        if (this.page < this.pageSettings.length - 1)
        {
            this.page = Number(this.page) + 1;
        }
    }

這樣我們就完成了頁面的檢核控制
還有一些細部的控制可以在看需求加上去
有些可能按下下一頁的時候才觸發檢核
這樣可能就需要在下一頁的部分多一個變數紀錄是否觸發過
在把這個變數傳進去元件裡面控制
這是一種寫法
看還有沒有其他種寫法
這大概就是今天的部分 明天再來想可以加什麼東西
今天好像沒改到程式不過也切個分支 之後看有沒有甚麼要補充的

今日程式:day15