Как сравнить два значения в formBuilder? - PullRequest
0 голосов
/ 15 января 2020

У меня есть построитель форм следующим образом:

this.feedbackForm = new FormGroup({
  figure: new FormControl('', Validators.pattern(/^[0-9]+$/)),
  maxVal: new FormControl(''),
  minVal: new FormControl('', Validators.max(feedbackForm.values.maxVal - 1)),
});

Я хочу сравнить minVal так, чтобы он был меньше максимального значения, но из приведенного выше кода он показывает ошибку следующим образом:

ОШИБКА TypeError: Невозможно прочитать 'значения' свойства неопределенного

Ответы [ 2 ]

1 голос
/ 16 января 2020

Маркушеп упомянул, что есть несколько возможных способов и предоставил хороший. Я решил добавить еще одну. Впрочем, это может быть излишним для того, что вы хотите.

Вы можете сделать это настраиваемым валидатором на уровне формы.

static minLessThanMax(control: AbstractControl): ValidationErrors {
    const value: formValue = (control as FormGroup).getRawValue();
    if (value) {
        const minValue = formValue.minValue;
        const maxValue = formValue.maxValue;

        if (minValue > maxValue) {
            control.get('min').setErrors({ minMoreThanMax: true });
        } else {
            control.get('end').setErrors(null);
        }
    }
    return null;
}

А затем, когда вы обновите свою группу FormGroup:

this.feedbackForm = new FormGroup({
  figure: new FormControl('', Validators.pattern(/^[0-9]+$/)),
  mixVal: new FormControl(''),
  maxVal: new FormControl('', Validators.pattern(/^[0-9]+$/)),
}, { validator: minLessThanMax });
1 голос
/ 15 января 2020

Вы ссылаетесь на свою форму в определении формы. Это означает, что вы ссылаетесь на feedbackForm до того, как оно будет определено.

Есть много способов выполнить sh то, что вы собираетесь. Одним из способов будет добавление валидатора в элемент управления формы после определения формы.

this.feedbackForm = new FormGroup({
  figure: new FormControl('', Validators.pattern(/^[0-9]+$/)),
  mixVal: new FormControl(''),
  maxVal: new FormControl('', Validators.pattern(/^[0-9]+$/)),
});


this.feedbackForm.get('minVal')
    .setValidators(Validators.max(this.feedbackForm.get('maxVal').value - 1))
...