Блог

Главная - Вопросы по программированию - Проверка одного и того же значения при двух выборках в Angular 9

Проверка одного и того же значения при двух выборках в Angular 9

#angular #validation #angular-validation

#angular #проверка #angular-проверка

Вопрос:

Я новичок в Angular, на самом деле это код другого программиста. Любые идеи или были бы действительно оценены.

У меня есть два простых выбора с тремя параметрами, и я пытаюсь проверить, что они имеют одинаковое выбранное значение.

Я создал валидатор, который проверяет, имеет ли вторая выборка то же значение, что и первая. Это работает только для второго, но когда я меняю первый выбор, средство проверки не запускается и не обновляется.

Код выглядит следующим образом:

   maxTimeValidator = ( control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else if ( control.value !== this.RiskForm.controls.range_min_time.value ) {
      return { differentTimeRange: true, error: true };
    }

    return {}
  }


  RiskForm: FormGroup;
  submit_error = false;
  RiskData = {
    id: [null,[]],
    range_min_time: [null, [Validators.required]],
    range_max_time: [null, [Validators.required,this.maxTimeValidator]],
  }

  ngOnInit(): void {
    // Initialice Form Data
    this.RiskForm = this.formBuilder.group(this.RiskData);
  }

Я попытался создать две функции проверки / та же проблема: валидатор, похоже, не запускается или не обновляется при изменении одного выбора.

Любой совет был бы полезен, я ценю, что вы уделяете время помощи.

Комментарии:

1. это потому, что вы применили этот валидатор только для этого элемента управления, т.Е. range_max_time элемента управления. Вам нужно будет написать средство проверки, которое будет применяться к форме

Ответ №1:

Вам понадобится валидатор, который будет применяться к вашей форме. Аналогично этому:

 this.registerForm = this.formBuilder.group(
  {
    firstName: ["", [Validators.required]],
    lastName: ["", [Validators.required]],
    email: ["", [Validators.required, Validators.email]],
    password: ["", [Validators.required, Validators.minLength(6)]],
    confirmPassword: ["", Validators.required]
  },
  {
    // Used custom form validator name
    validator: ComparePassword("password", "confirmPassword")
  }
);


export function ComparePassword(controlName: string, matchingControlName: string) {
      return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors amp;amp; !matchingControl.errors.mustMatch) {
          return;
        }

        if (control.value !== matchingControl.value) {
          matchingControl.setErrors({ mustMatch: true });
        } else {
          matchingControl.setErrors(null);
        }
      };
}