Winkelformvalidierung: zwei Felder vergleichen

Question

Wie kann ich in einer Angular 4-Anwendung zwei Felder eines Formulars validieren, die einen Vergleich durchführen?

Zum Beispiel, nehmen wir an, dass meine Form ein startDate und eine endDate Datumsfelder hat, und ich möchte sicherstellen, dass die endDate als die startDate größer sein muss.

Answer 1

Wenn Sie Validierungen implementieren möchten, die ein oder mehrere Geschwister (Formular) steuert, müssen Sie die definieren Validator-Funktion auf einer Ebene höher/höher als die der Geschwistersteuerelemente. Für die Ex:

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

Dann außerhalb der Definition der Komponentenklasse (in der gleichen Datei), definieren die Funktion checkIfEndDateAfterStartDate auch.

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 
} 

Diese Validierung wird für diesen FormGroup durch Addieren der Fehlerzeichen (hier invalidEndDate) zu true auf die Fehler-Objekt die FormGroup ungültig machen. Wenn Sie möchten, dass bestimmte Fehler stattdessen auf einer der gleichgeordneten Steuerelemente gesetzt werden, können Sie die Fehlerflags für diesen formControl manuell festlegen, indem Sie etwa wie folgt verwenden: c.get('endDate').setErrors({ invalidEndDate: true }). Wenn Sie dies tun, dann stellen Sie sicher, dass Sie sie für einen gültigen Fall löschen, indem Sie die Fehler auf null wie folgt setzen, c.get('endDate').setErrors(null).

Eine Live-Demo einer ähnlichen Validierung kann here gesehen werden.

Answer 2

versuchen diese

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; 
    } 

basierend auf dem Dateerror boolean Wert, den Sie Fehler zeigen msg