Angular2 ошибка удаления реактивных форм

Ответ 1

Другие решения, кажется, не работают. Похоже, угловое управление мышлением недопустимо, если свойство ошибок не равно нулю.

До тех пор, пока вы хотите удалить только одну ошибку и оставить других, нет способа сделать это, кроме как вручную. Эта функция ниже удалит только одну ошибку, указанную в аргументе ale, оставив другие. Это также гарантирует, что если вы удалите ошибку, элемент управления станет действительным.

// call it in validator function if control is valid
removeError(this.currencyForm.controls['currencyMaxSell'], 'smallerThan');

//this function removes single error
    function removeError(control: AbstractControl, error: string) {
      const err = control.errors; // get control errors
      if (err) {
        delete err[error]; // delete your own error
        if (!Object.keys(err).length) { // if no errors left
          control.setErrors(null); // set control errors to null making it VALID
        } else {
          control.setErrors(err); // controls got other errors so set them back
        }
      }

Не стесняйтесь редактировать этот вопрос и сделать его более читабельным.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я ПРОВЕРИЛ ЭТО В 6-М УГЛУ

Ответ 2

Просто установите значение в объекте ошибки null:

this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: null})

Или, если вы хотите удалить все проверки из элемента управления, используйте setErrors(null), как это предлагается в комментариях.

Ответ 3

AFAIK, вам действительно не нужно использовать метод setErrors когда вы можете создавать собственные валидаторы. Вы можете легко создавать собственные валидаторы для вашего formControl или formGroup, и внутри вашего валидатора вам просто нужно вернуть ValidatorFn, и вы не должны использовать метод setErrors.

Для получения дополнительной информации о пользовательском валидаторе для FormGroup я предлагаю вам прочитать эту статью, которая решила мою проблему.

Это мой рабочий код:

registerationForm = this.formBuilder.group({
  username: ['', [Validators.required, Validators.email]],
  passwords: this.formBuilder.group(
    {
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    },
    {
      validator: matchPassword
    }
  ),
  policyAgreement: ['', Validators.required]
});

// Outside my component:
const matchPassword = (group: FormGroup) => {
  const password = group.get('password').value;
  const confirmPassword = group.get('confirmPassword').value;
  return password != confirmPassword ? { matchPassword: true } : null;
};

Ответ 4

Чтобы удалить только одну ошибку управления формой при выполнении ручной проверки, выполните следующие действия:

this.myFormGroup.get('myControl').setErrors({'myCustomError':null})

Это только обновит значение указанной ошибки и не удалит предыдущую проверку, которую вы могли бы сделать, в отличие от setErrors(null), которая сводит на нет весь объект ошибок для элемента управления.

Ответ 5

Используя Angular 7, ни одно из представленных здесь решений не помогло мне.

Мне пришлось обработать мою ошибку вручную в моем пользовательском валидаторе, который работает с несколькими полями формы.

В приведенном ниже примере проверяется, достаточно ли велика разница между двумя полями формы. В рассматриваемых полях формы также есть несколько других валидаторов (lte, gte), поэтому очистка всех ошибок с помощью setError (null) была исключена, и попытка удалить мою конкретную ошибку с помощью setError ({minDifference: null}) всегда оставляла formControl в недопустимом состоянии.

minDifference(firstKey: string, secondKey: string, minDifference: number) {
  return (c: AbstractControl): {[key: string]: any} => {
    if (!c.get(firstKey).value || !c.get(secondKey).value ||
      Math.abs(c.get(firstKey).value - c.get(secondKey).value) >= minDifference) {
      // If there is only one error and it this one then remove all errors from the control (removing 1 does not work)
      if (c.get(secondKey).hasError('minDifference')) {
        // If previously our error has been set, remove it.
        delete c.get(secondKey).errors.minDifference;
        // If no errors remain after, set the control to be valid.
        if (Object.keys(c.get(secondKey).errors).length === 0) {
          c.get(secondKey).setErrors(null);
        }
      }
      return null;
    }
    // Condition was not met, add our error to the alreadying existing ones.
    c.get(secondKey).setErrors( {...c.get(secondKey).errors, ...{ minDifference: true}} )
  }
}

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

Ответ 6

Если вы устанавливаете ошибку вручную, вы можете использовать setValue(), чтобы снова сделать ее действительной.

if(myCurrency is smallerThanOther){
 this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true})
} else {
 this.currencyForm.controls['currencyMaxSell'].setValue(myCurrency);
}

Ответ 7

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

if (this.currencyForm.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}

Если ошибка связана с определенным элементом управления в форме, включите элемент управления формы:

if (this.currencyForm.controls.currencyMaxSell.hasError("smallerThan")) {
 this.currencyForm.setErrors({
  "currencyMaxSell": null
  });
  this.currencyForm.updateValueAndValidity();
}

Ответ 8

Просто попробуйте это:

const value = this.currencyForm.controls['currencyMaxSell'].value;
this.currencyForm.controls['currencyMaxSell'].patchValue();
this.currencyForm.controls['currencyMaxSell'].patchValue(value);

Вы должны фактически изменить значение один раз, чтобы fromControl проверил, является ли оно действительным или нет.

Ответ 9

В дополнение к тому, что предложил @karoluS, вы можете просто использовать:

delete control.errors.errorName;

Так что в вашем случае:

delete this.currencyForm.controls['currencyMaxSell'].errors.smallerThan;

Ответ 10

Чтобы удалить только одну ошибку управления формой, используйте .setErrors() с элементом.

this.myFormGroup.get('myControl').setErrors(
)

Это удалит только одну ошибку элемента.