Angular2 error removing reactive forms

Question

I am trying to set the form control status to valid

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

Now I want to remove this error.

Answer 1

Other solutions do not seem to work. It seems that angular control of thinking is unacceptable if the property of errors is not equal to zero.

As long as you want to remove only one error and leave the others, there is no way to do this except manually. This function below will remove only one error specified in the ale argument, leaving the others. It also ensures that if you remove the error, the control will become valid.

 // 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 } } 

Feel free to edit this question and make it more readable.

DISCLAIMER: I CHECKED IT IN THE 6TH ANGLE

Answer 2

Just set the value in the null error object:

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

Or, if you want to remove all checks from the control, use setErrors(null) , as suggested in the comments.

Answer 3

AFAIK, you really don't need to use the setErrors method when you can create your own validators . You can easily create your own validators for your formControl or formGroup, and inside your validator you just need to return ValidatorFn, and you should not use the setErrors method.

For more information about the custom validator for FormGroup, I suggest you read this article, which solved my problem.

This is my working code:

 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; }; 

Answer 4

To remove only one form control error during manual validation, follow these steps:

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

This will only update the value of the specified error and will not delete the previous check you could do, unlike setErrors(null) , which nullifies the entire error object for the control.

Answer 5

Using Angular 7, none of the solutions presented here helped me.

I had to handle my error manually in my custom validator, which works with multiple form fields.

The example below checks to see if the difference between the two form fields is large enough. There are also several other validators in the form fields under consideration (lte, gte), so the elimination of all errors with setError (null) was excluded, and the attempt to remove my specific error with setError ({minDifference: null}) always left formControl in an invalid state .

 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}} ) } } 

Honestly, I do not really like my solution, I expected that I could solve it much easier, but I could not find a way to do this.

Answer 6

If you set the error manually, you can use setValue () to make it valid again.

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

Answer 7

You will need a combination of the best answer here and the answer in the comments so that your form can fix the error and become valid for resubmission:

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

If the error is associated with a specific control on the form, enable the form control:

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

Answer 8

Just try this:

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

You must actually change the value once so that fromControl checks whether it is valid or not.

Answer 9

In addition to what @karoluS suggested, you can simply use:

 delete control.errors.errorName; 

So in your case:

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

Answer 10

To remove only one form control error, use .setErrors() with the element.

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

This will remove only one item error.