angular/components

MatInput does not clear error state on form reset

Open

#13240 opened on Sep 21, 2018

View on GitHub
 (11 comments) (3 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: material/inputhelp wanted

Description

This is my submiting function

public submitCategoryForm(): void { this.buttonText = 'Processing...'; this.isClicked = true;

const categoryData = this.categoryForm.value;
this.categoryModel = new CategoryInputModel(
  categoryData['title'],
  categoryData['imageUrl']
);

this.categoryServices.addNewCategory(this.categoryModel).subscribe(() => {
  this.buttonText = 'Add';
  this.isClicked = false;
  this.categoryForm.reset({ title: '', imageUrl: '' });
});

}

What is the use-case or motivation for changing an existing behavior?

After submiting my form (successfully) and reset values of the form, validations for required value pop up. How i can submit my form clear values and to make sure validations are not shown.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6, Material 6.4.7

Is there anything else we should know?

Contributor guide

Tech stack
typescriptangularhtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular Reactive FormsAngular Material
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the MatInput component's implementation of ControlValueAccessor. Examine how formGroup.reset() affects the error state. Look at the existing comments for workarounds. The fix likely involves updating the MatInput to clear its error state when the parent form is reset.