angular / angular/components

Strange mat-error & state behaviour on Custom ControlValueAccessor component

Abierto
#7,920 20 comentarios 2 reacciones 0 asignados Ver en GitHub
area: material/form-field P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Bug
I have this custom input component, using `ControlValueAccessor` and it is perfectly in sync with the controlling formGroup, and gives the `valid`, `invalid`, `touched` and `hasErrors('required')` to the formGroup & internally correctly.

#### What is the current behavior?
Whenever i want to use the `mat-error` component, it will only work as expected when I give the `required` attribute to the `input`. When I leave that out, the `mat-error` will _never_ show, whatever I try. So on blur (`touched=true`) it will not show the `mat-error`. But it _does_ in this simple plunkr: https://plnkr.co/edit/cJFCUITMlcBc78v06937?p=preview

I'm not sure why this is, the only thing I can think of is that I use ` [(ngModel)]="_value"` on the input i.c.w. `NG_VALUE_ACCESSOR`/`ControlValueAccessor`, but I would think that since the formGroup state is correct, and it all works perfectly when having the `required` property on it, this should be irrelevant.

Looking at this @crisbeto's answer: https://github.com/angular/material2/issues/4027 Point 1 seems to be saying a similar thing, that setting `required` on it, it works, and towards the end @willshowell states `Errors are hidden until the input is both invalid and touched` yet they are both invalid and when touched still don't show it.

#### What is the expected behavior?
I would expect the `required` to not be relevant to showing the `mat-error` element. For example, I might want to validate an email with `Validators.email` but have it optional.

#### What are the steps to reproduce?
This plunkr demonstrates it by simply clicking and blurring each input field: https://plnkr.co/edit/4B2OOc5Spv9ewxbeIndZ?p=preview

Although While recreating it in plunkr, I found out some new strange behaviour. The first instance of the component doesn't seem to apply the `placeholder` attribute, and also doesn't change the `touched` state; however this problem has not occurred on my project (yet). See: https://plnkr.co/edit/FODeH4ZhE7IG01dmYCiR?p=preview This does indicate something strange going on, and I cannot figure out what it is.

#### What is the use-case or motivation for changing an existing behavior?
I would expect `required` not to be required for `mat-error` to work.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- "@angular/material": "2.0.0-beta.11",
- "@angular/common": "^4.3.6",
- "@angular/compiler": "^4.3.6",
- "@angular/compiler-cli": "^4.3.6",
- "@angular/core": "^4.3.6",
- "@angular/forms": "^4.3.6",
- "@angular/http": "^4.3.6",
- "typescript": "^2.4.2",

#### Is there anything else we should know?
- I've spent hours trying to fix this and trying to figure out why this happens. I'm pretty convinced it is a problem with the implementation of `mat-error`.
- I've tried transcluding the `mat-error` like: `{{ getError() }}` and then `` But then it is placed wrongly and will always show the error, probably would not fix this issue either.
- I've tried accessing the state internally on the component, with `Injector` & `NgControl` and subscribing to `statusChanges` and could see the internal status is correct as well.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza ejecutando las reproducciones de Plunker proporcionadas y compara el componente personalizado ControlValueAccessor con el ejemplo simple que funciona. Sigue cómo mat-error evalúa los estados invalid y touched cuando falta required y, después, verifica la validación opcional del correo electrónico y el comportamiento del placeholder de la primera instancia. Se considera completado cuando la reproducción muestra mat-error de forma consistente para los controles invalid y touched sin requerir required.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
40/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.