Angular 4 - 使用動態參數值的自定義驗證程序

我寫了一個自定義驗證程序，用於檢查日期是否高於某個最小日期。Angular 4 - 使用動態參數值的自定義驗證程序

的代碼如下所示：

export function validateMinDate(min: Date): ValidatorFn { 
    return (c: AbstractControl) => { 

     if (c == null || c.value == null) 
      return null; 

     let isValid = c.value >= min; 
     if (isValid) { 
      return null; 
     } else { 
      return { 
       validateMinDate: { 
        valid: false 
       } 
      }; 
     } 
    }; 
}

我initate這樣

this.definitionForm = this.fb.group({    
     "from": [this.details.From, Validators.required], 
     "to": [this.details.To, [Validators.required, validateMinDate(this.details.From)]] 
    });

我的形式，我可以看到正在應用的驗證，但是當我console.log()我最小值的驗證我可以看到它等於null。

this.details.From在我啓動表單時從null開始，所以我假設參數不是動態的，只是在表單被設置時才取值。

如何確保在用戶選擇起始日期時更新最短日期，從而更改this.details.From的值？

來源

2017-10-20 Nicolas

您可以嘗試使用驗證器作爲指令並注入一個服務，您可以使用this.details.From的最新值進行更新。 –

你所要做的就是觀看'From'日期，在每次更改中你都必須將驗證器重置爲控件'to'，你使用的是日期選擇器嗎？或者只是一個簡單的輸入。？ –

我如何看待它，是將驗證器應用於表單組，或者如果您有大表單，我建議您爲from和to創建一個嵌套組，並在其上應用驗證器，否則此定製只要發生任何變化，驗證器就會被觸發。因此，這將意味着更新驗證和formgroup這樣的：

this.definitionForm = this.fb.group({    
    "from": [this.details.From, Validators.required], 
    "to": [this.details.To, [Validators.required]] 
}, {validator: validateMinDate()}); 

export function validateMinDate(): ValidatorFn { 
    return (c: AbstractControl) => { 
     if(c) { 
     let isValid = c.get('to').value >= c.get('from').value; 
     if (isValid) { 
      return null; 
     } else { 
      return {validateMinDate: true}; 
     } 
     } 
    }; 
}

當然還有其他選擇，例如偵聽change事件，然後執行日期的檢查，如果無效，使用setErrors在形式上。

來源

2017-10-20 16:04:13 Alex

這不是他所要求的...... – ConquerorsHaki

@ConquerorsHaki我的答案以「我怎麼看它......」開始，這意味着我將如何修改自定義驗證器的樣子。 – Alex

Angular 4 - 使用動態參數值的自定義驗證程序

回答

相關問題