驗證開始時間小於結束時間

對於學期的兩個關聯時間，一個開始時間，一個結束時間，理論上開始時間是不能大於結束時間的，因此在前臺進行表單提交時，須要對其進行驗證,保證數據正確性.

angular驗證器

我使用的是響應式表單，首先的學習怎麼添加驗證器,簡單去官網總結了一下：

1.每一個控件在進行賦值時，都會過一遍全部的驗證器,全部的控制器都經過的話就會進行賦值.
2.如有一個驗證器不經過，都不會進行賦值，同時在errors屬性中會添加上未經過的驗證失敗屬性
3.咱們能夠經過驗證失敗的屬性來提示用戶

在angular官網上找到了一串實例代碼:
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

執行forbiddenNameValidator()方法,會返回一個ValidatorFn類型的方法,此方法接收了一個AbstractControl的對象，並要求返回null或{[key: string]: any},這麼說來，咱們只須要提供一個方法,根據提供的控件獲取值，在方法中進行判斷，根據邏輯返回null(即經過驗證)或返回一個對象(屬性名即爲驗證錯誤的名字，值隨意填寫).

實現方法

由於不管時開始時間或結束時間變化，都須要觸發驗證，而且驗證錯誤類型還須要同步，嘗試了幾番，最終的解決方案是在開始時間控件和結束時間控件中都添加一個驗證器:

this.validateForm.get('startTime').setValidators(this.semesterService.validatorSemester(this.validateForm));
this.validateForm.get('endTime').setValidators(this.semesterService.validatorSemester(this.validateForm));

不管是開始時間改變或者是結束時間改變，都會同時觸發驗證器，驗證函數以下，當兩個控件值不符合咱們預期時，就往第三方控件timeError中添加錯誤屬性'time',若經過驗證就刪除錯誤是屬性.

validatorSemester(validateForm: FormGroup): ValidatorFn {
        return (some: AbstractControl): { [key: string]: any } | null => {
            if (!this.judgeSemesterTime(validateForm)) {
                validateForm.get('timeError').setErrors({ 'time': {} });
            } else {
                validateForm.get('timeError').setErrors(null);
            }
            return null;
        };
    }

前臺在根據錯誤屬性提供提醒：

<nz-form-explain
            *ngIf=" validateForm.get('timeError').errors?.time" style="color:red;">
                結束時間必須在開始時間以後!
            </nz-form-explain>

待完善

當時寫得比較匆忙，想到什麼就寫什麼了，雖然實現了功能，可是代碼卻不可以複用，驗證代碼與空間名牢牢的耦合在了一塊兒，而且還多寫了一個多餘的控件僅僅用來顯示錯誤信息。
打算寫通用的驗證方法,接受兩個控件對象，一個比較方法(相似compereTo接口),錯誤信息提示(就是以前返回的錯誤類型{['key':any]}),把全部的添加驗證錯誤邏輯寫到驗證方法中,只須要調用者提供比較方法和錯誤信息(便於前臺判斷),這樣就能夠實現通用驗證了.