У меня есть FormGroup определенный как ниже:

this.businessFormGroup: this.fb.group({
    'businessType': ['', Validators.required],
    'description': ['', Validators.compose([Validators.required, Validators.maxLength(200)])],
    'income': ['']
  })

Теперь, когда businessType равен Other, я хочу удалить Validators.required валидатор из description. И если businessType не Other, я хочу добавить Validators.required.

Я использую приведенный ниже код для динамического добавления / удаления Validators.required. Однако он очищает существующий Validators.maxLength валидатор.

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.get('description').validator = <any>Validators.compose([Validators.required]);               
} else {                
    this.businessFormGroup.get('description').clearValidators();               
}

this.businessFormGroup.get('description').updateValueAndValidity(); 

У меня вопрос, как я могу сохранить существующие валидаторы при добавлении / удалении валидатора required.

64
A J Qarshi 2 Мар 2018 в 21:13

6 ответов

Лучший ответ

Угловые формы имеют встроенную функцию setValidators (), которая позволяет программно назначать валидаторы.

Для вашего примера вы можете сделать:

if(this.businessFormGroup.get('businessType').value !== 'Other'){
    this.businessFormGroup.controls['description'].setValidators([Validators.required, Validators.maxLength(200)]);              
} else {                
    this.businessFormGroup.controls['description'].setValidators([Validators.maxLength(200)]);               
}

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

29
Narm 16 Окт 2018 в 19:51

Если вы меняете «Требуется валидатор» более одного раза (например, с помощью флажка), вы должны добавить это:

this.formGroup.controls["firstName"].setErrors(null);

Так:

  onAddValidationClick(){
         this.formGroup.controls["firstName"].setValidators(Validators.required);
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }

onRemoveValidationClick(){
         this.formGroup.controls["firstName"].setErrors(null);
         this.formGroup.controls["firstName"].clearValidators();
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }
1
Kike Lebowski 9 Янв 2020 в 11:28

Любой, кто все еще ищет ответ, может сделать это так, обработать его в ngOnInit () или в любом другом месте, которое вам нравится.

   const validators = formGroup.validator; /* or control.validator */

   const newValidator = CustomValidator.checkUserNameValidity(); 

   /* Add to existing validator */

   if(validator) {
      formGroup.setValidators([validators, newValidator])
   } else {. /* if no validators added already */
      formGroup.setValidators([newValidator]);
   }

Повторите то же самое для asyncValidator.

0
sudharsan tk 18 Окт 2019 в 01:11

Если вы меняете «Требуется валидатор» более одного раза (например, с помощью флажка), вы должны добавить это: Очень важное поле! this.formGroup.controls [ " FirstName " ] setErrors (нуль ) . ;

0
user11764588 20 Май 2020 в 11:25

Может быть, это поможет:

Добавление Validators.required в набор валидаторов существующего AbstractControl:

if (c.validator !== null) {
        c.setValidators([c.validator, Validators.required])
  } else {
        c.setValidators([Validators.required])
  }
2
nircraft 22 Фев 2019 в 03:57

Это одна работа для меня

   onAddValidationClick(){
         this.formGroup.controls["firstName"].setValidators(Validators.required);
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }

onRemoveValidationClick(){
         this.formGroup.controls["firstName"].clearValidators();
        this.formGroup.controls["firstName"].updateValueAndValidity();
      }
12
San Jaisy 25 Мар 2019 в 05:52