angular / angular/components

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

Ouverte
#9,788 9 commentaires 5 réactions 0 personnes assignées Voir sur GitHub
area: material/input P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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?

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et examinez comment le mat-input intégré est connecté au formulaire parent et soumis sans interaction. Reproduisez l’erreur de validation manquante, puis confirmez que l’erreur de champ obligatoire apparaît lorsque le formulaire parent est soumis.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.