Проверка угловой формы: сравните два поля

Question

В приложении Angular 4, как я могу проверить два поля формы, делая сравнение?

Например, предположим, что моя форма имеет startDate и endDate поля даты, и я хочу убедиться, что endDate должен быть больше чем startDate,

Answer 1

Если вы хотите реализовать валидацию, содержащую один или несколько родственных элементов управления (формы), вы должны определить функцию валидатора на уровне выше / выше уровня элементов управления родственного элемента. Например:

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, Если вы хотите, чтобы вместо какого-либо из элементов управления брата были установлены конкретные ошибки, то вы можете вручную установить флаги ошибок для этого элемента. formControl используя что-то вроде c.get('endDate').setErrors({ invalidEndDate: true }), Если вы сделаете это, убедитесь, что вы очистили их для допустимого случая, установив ошибки в null как это, c.get('endDate').setErrors(null),

Демонстрацию аналогичной проверки можно посмотреть здесь.

Answer 2

Попробуй это

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 вы видите ошибку msg