角度表單驗證：比較兩個字段

在Angular 4應用程序中，如何驗證表單的兩個字段進行比較？角度表單驗證：比較兩個字段

例如，假設我的形式有startDate和endDate日期字段，我想確保了endDate必須比startDate更大。

2017-09-12 ShinDarth

您是否嘗試過[[ngModel]]訪問窗體上的兩個值，然後比較兩個值？ – Debabrata

@ShinDarth在我的回答下面幫助你？ – Robert

@Robert謝謝你的回答，但是我用了amal的解決方案，看起來更直接 – ShinDarth

當您要執行包含一個或多個兄弟（表）控制驗證，你必須定義驗證器功能的級別高於兄弟控制器的級別。對於前：

ngOnInit() { 
this.form = this.formbuilder.group({ 
    'startDate' = ['', [<control-specific-validations>]], 
    'endDate' = ['', [<control-specific-validations>]] 
}, { validator: checkIfEndDateAfterStartDate } 
}); 
}

然後組件類的定義之外（在同一個文件），定義函數checkIfEndDateAfterStartDate爲好。

export function checkIfEndDateAfterStartDate (c: AbstractControl) { 
//safety check 
if (!c.get('startDate').value || !c.get('endDate').value) { return null } 
// carry out the actual date checks here for is-endDate-after-startDate 
// if valid, return null, 
// if invalid, return an error object (any arbitrary name), like, return { invalidEndDate: true } 
// make sure it always returns a 'null' for valid or non-relevant cases, and a 'non-null' object for when an error should be raised on the formGroup 
}

這個驗證將使FormGroup無效通過將錯誤標誌（這裏invalidEndDate）到true到錯誤的對象爲FormGroup。如果您想要在任何兄弟控件上設置特定的錯誤，則可以使用類似c.get('endDate').setErrors({ invalidEndDate: true })這樣的手段在該formControl上手動設置錯誤標誌。如果你這樣做，那麼通過將錯誤設置爲null像這樣，c.get('endDate').setErrors(null)來確保你清除它們的有效情況。

可以看到類似驗證的現場演示here。

來源

2017-09-12 18:17:30 amal

我不認爲你需要導出檢查功能。另外爲什麼你要把'c'聲明爲'AbstractControl'而不是'FormGroup'？ – ShinDarth

是的，如果函數位於同一個文件中，則不必「導出」函數。我將它聲明爲'AbstractControl'，因爲它是FormGroup的基類（也適用於FormControl和FormArray）。這樣做沒有害處。也可以幫助您使用該類'打字稿'中定義的所有屬性。 – amal

它的工作，非常感謝。接受這個答案！ – ShinDarth

試試這個

export class validationComponent implements OnInit { 
    private testForm:FormGroup; 

    constructor(private fb: FormBuilder) { 

    } 

    ngOnInit() { 
     this.testForm = this.fb.group({ 
      'startDate': ['', [Validators.required]], 
      'endDate': ['', [Validators.required]] 
     }); 

     this.subscribeDateChanges(); 
    } 

    subscribeDateChanges() { 
     const startDateChanges = (<any>this.testForm).controls.startDate.valueChanges; 
     const endDateChanges = (<any>this.testForm).controls.endDate.valueChanges; 

     startDateChanges.subscribe(start => { 
      this.testForm.controls['endDate']. 
       setValidators(
       [Validators.required, 
       CustomValidators.minDate(this.toYYYYMMDD(start))]); 
     this.validateDates(); 
     }); 

     endDateChanges.subscribe(end => { 
       this.validateDates(); 
     }); 
    } 

    dateError: boolean = false; 
    validateDates(): void{ 
     let startDate = this.testForm.controls['startDate'].value; 
     let endDate = this.testForm.controls['endDate'].value; 
     if(endDate && startDate){ 
      this.dateError = endDate <= startDate; 
     } 
    } 

    toYYYYMMDD(d:Date): string { 
     d = new Date(d) 
     var yyyy = d.getFullYear().toString(); 
     var mm = (d.getMonth() + 101).toString().slice(-2); 
     var dd = (d.getDate() + 100).toString().slice(-2); 
     return yyyy + '-' + mm + '-' + dd; 
    }

根據您顯示錯誤味精dateError布爾值

來源

2017-09-12 16:30:48 Robert

角度表單驗證：比較兩個字段

回答

相關問題