angular / angular/components

form-field: support swapping various child components with ngIf

Ouverte
#7,737 11 commentaires 14 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field feature 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:

I recently ran into a bug that `mat-hint` threw an error when its corresponding `matInput` is inserted conditionally. E.g. take the following template:

```




Some hint.

```
Note that the only reason inputs are inserted conditionally here is because the placeholder text is different depending on the condition.

This will throw the following error:

```
app.component.html:7 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'mat-hint-0'.
at new d (VM8254 zone.min.js:1)
at viewDebugError (VM7606 core.umd.js:8466)
at expressionChangedAfterItHasBeenCheckedError (VM7606 core.umd.js:8444)
at checkBindingNoChanges (VM7606 core.umd.js:8608)
at checkNoChangesNodeDynamic (VM7606 core.umd.js:12515)
at checkNoChangesNode (VM7606 core.umd.js:12464)
at debugCheckNoChangesNode (VM7606 core.umd.js:13241)
at debugCheckRenderNodeFn (VM7606 core.umd.js:13181)
at Object.eval [as updateRenderer] (VM7993 AppComponent.ngfactory.js:78)
at Object.debugUpdateRenderer [as updateRenderer] (VM7606 core.umd.js:13163)
at checkNoChangesView (VM7606 core.umd.js:12283)
at callViewAction (VM7606 core.umd.js:12650)
at execEmbeddedViewsAction (VM7606 core.umd.js:12628)
at checkNoChangesView (VM7606 core.umd.js:12282)
at callViewAction (VM7606 core.umd.js:12650)
```
This is not a problem when the input is not inserted conditionally but rather placed in the template right away. **I'm not sure if that is by design or not** but it caused me some hours of debugging until I realised it was the combination of `mat-hint` inside a `mat-form-field` whom\s `matInput` is rendered using `*ngIf`.

#### What is the expected behavior?

I expected this to just work, but again, maybe this is by design but then we should document somewhere that `matInput`s aren't allowed to be inserted using structural directives.

#### What is the current behavior?

Described above.

#### What are the steps to reproduce?

Here's a plunk that reproduces the error: http://plnkr.co/edit/MrUvFVKIW1BoX9d96eeu?p=preview

Simply check the console.

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

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

I'm using `@angular/material` version `2.0.0-beta.11` but the plunk uses the latest version. Unfortunately I can't tell if this error has been thrown in older versions as well.

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

Yeah, you're all doing an amazing job. Thanks for that.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’exemple du modèle de l’issue et le Plunker lié, en reproduisant l’ExpressionChangedAfterItHasBeenCheckedError lorsque des enfants matInput sont insérés avec *ngIf aux côtés de mat-hint. Examinez le comportement de mat-form-field, matInput et mat-hint impliqué dans les changements conditionnels des enfants. Le travail est considéré comme terminé lorsque le remplacement conditionnel des inputs ne déclenche plus l’erreur signalée et que le cas reproduit est couvert par des tests.

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.