angular/components

MatInput does not clear error state on form reset

Open

#13.240 geöffnet am 21. Sept. 2018

Auf GitHub ansehen
 (11 Kommentare) (3 Reaktionen) (0 zugewiesene Personen)TypeScript (6.650 Forks)batch import
P3area: material/inputhelp wanted

Repository-Metriken

Stars
 (24.044 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 2T 16h) (80 gemergte PRs in 30 T)

Beschreibung

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

Research-Richtung
Untersuche die Implementierung von ControlValueAccessor in der MatInput Komponente. Prüfe, wie sich formGroup.reset() auf den Fehlerstatus auswirkt. Sieh dir die vorhandenen Kommentare nach Workarounds an. Die Lösung besteht wahrscheinlich darin, MatInput so zu aktualisieren, dass es seinen Fehlerstatus löscht, wenn das übergeordnete Formular zurückgesetzt wird.
Tech Stack
typescriptangularhtmlcss
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Veraltet
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
Angular Reactive FormsAngular Material
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60