angular / angular/components

A required mat-input field does not show error when the parent form is submitted.

Offen
#9,788 9 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/input P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:

For the purpose of code re-use and to maintain consistent functionality across my web app, I created an input component in my app whose role is to embed a mat-input in a parent form.

When the mat-input is a required field, the component displays it correctly in the parent form and an error is displayed when a user interacts with the field but does not enter anything. However, no error is displayed when the parent form is submitted without any user interaction with the embedded field.

Am I missing something? Is there a workaround?

#### What is the expected behavior?

An error should be displayed when the parent form is submitted.

#### What is the current behavior?

An error is not displayed when the parent form is submitted.

#### What are the steps to reproduce?

See: https://stackblitz.com/edit/angular-material2-issue-jph57r

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

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

I am using Chrome. Output of ng --version is given below:

```
Angular CLI: 1.6.0
Node: 8.9.3
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0
@angular/cli: 1.6.0
@angular/language-service: 4.4.6
@angular/material: 5.0.0
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.10.0

```
#### Is there anything else we should know?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und untersuche, wie das eingebettete mat-input mit dem übergeordneten Formular verbunden und ohne Interaktion übermittelt wird. Reproduziere den fehlenden Validierungsfehler und bestätige anschließend, dass der Fehler für das Pflichtfeld erscheint, wenn das übergeordnete Formular übermittelt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.