Add methods for clearing error messages

docs/reference/Field.md

@@ -138,6 +138,14 @@ showError( errorMessage: string ): void
 
 Forces the field to show the given error message, overriding whatever `error` was returning. This does not depend on, nor affect at all, the validity state of the field. The method is intended to show errors coming from the backend, with an informative purpose only (for the end user). Ideal for "email already registered" or similar errors.
 
+### clearError
+
+```ts
+clearError(): void
+```
+
+Clears the error message currently being shown. This will clear errors that came from failed validations as well as errors displayed with the [`showError`](#showError) method. In either case, it doesn't affect the validity state of the field at all.
+
 ### syncError
 
 ```ts

docs/reference/Form.md

@@ -218,4 +218,12 @@ Resets all the fields (calls [`reset`](Field.md#reset) on each of them).
 showErrors( errors: Record<string, string> ): void
 ```
 
-This method is like a shortcut for calling `showError` on each field. Basically, for each key-error pair in the given `errors` object, shows the error message in the field identified by the key. Can be useful if the backend returns errors for each field and they can be directly shown on the form.
+This method is like a shortcut for calling [`showError`](Field.md#showError) on each field. Basically, for each key-error pair in the given `errors` object, shows the error message in the field identified by the key. Can be useful if the backend returns errors for each field and they can be directly shown on the form.
+
+### clearErrors
+
+```ts
+clearErrors(): void
+```
+
+Clears error messages for all fields, by calling [`clearError`](Field.md#clearError) on each of them.

src/Field/index.ts

@@ -34,6 +34,7 @@ export default abstract class Field<ValueType> {
 			reset: action,
 			syncError: action,
 			showError: action,
+			clearError: action,
 			attachToForm: action
 		} );
 	}
@@ -84,6 +85,10 @@ export default abstract class Field<ValueType> {
 		this._presentedError = errorMessage;
 	}
 
+	clearError() {
+		this.showError( '' );
+	}
+
 	attachToForm( form: Form ) {
 		this._state.attachToForm( form );
 	}

src/Form/index.ts

@@ -38,7 +38,8 @@ export default class Form {
 			submit: action,
 			clear: action,
 			reset: action,
-			showErrors: action
+			showErrors: action,
+			clearErrors: action
 		} );
 	}
 
@@ -105,6 +106,10 @@ export default class Form {
 		forEach( errors, ( error, fieldKey ) => this.showErrorOnField( fieldKey, error ) );
 	}
 
+	clearErrors() {
+		this.eachField( field => field.clearError() );
+	}
+
 	private attachFields() {
 		forEach( this._fields, field => field.attachToForm( this ) );
 	}

tests/Field.test.ts

@@ -25,6 +25,8 @@ describe( 'Field', () => {
 		...params
 	} );
 
+	const createInvalidField = () => createField( { value: 'Too loong' } );
+
 	describe( 'constructor', () => {
 		it( 'assigns the given attributes to the field', () => {
 			const field = createField();
@@ -244,6 +246,42 @@ describe( 'Field', () => {
 		} );
 	} );
 
+	describe( '@clearError', () => {
+		describe( 'when no error is being shown', () => {
+			it( 'does not show any error', () => {
+				const field = createInvalidField();
+
+				field.clearError();
+
+				expect( field.error ).toEqual( '' );
+			} );
+		} );
+
+		describe( 'when an error is being shown', () => {
+			describe( 'and it was manually set', () => {
+				it( 'hides the error', () => {
+					const field = createField();
+
+					field.showError( 'Something went wrong' );
+					field.clearError();
+
+					expect( field.error ).toBe( '' );
+				} );
+			} );
+
+			describe( 'and it comes from a failed validation', () => {
+				it( 'hides the error', () => {
+					const field = createInvalidField();
+
+					field.syncError();
+					field.clearError();
+
+					expect( field.error ).toBe( '' );
+				} );
+			} );
+		} );
+	} );
+
 	describe( '@attachToForm', () => {
 		const createAndAttachField = () => {
 			const validator = jest.fn(

tests/Form.test.ts

@@ -435,4 +435,19 @@ describe( 'Form', () => {
 			expect( () => form.showErrors( { age: 'Invalid' } ) ).not.toThrow();
 		} );
 	} );
+
+	describe( '@clearErrors', () => {
+		it( 'clears the error messages on all fields', () => {
+			const form = createForm();
+
+			form.submit(); // Form is invalid, so error messages will show up
+			form.showErrors( { email: 'This email has a problem' } );
+
+			form.clearErrors();
+
+			form.eachField( ( field ) => {
+				expect( field.error ).toEqual( '' );
+			} );
+		} );
+	} );
 } );