Strange mat-error & state behaviour on Custom ControlValueAccessor component
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
#### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia eseguendo le riproduzioni Plunker fornite e confronta il componente personalizzato ControlValueAccessor con il semplice esempio funzionante. Traccia il modo in cui mat-error valuta gli stati invalid e touched quando required è assente, quindi verifica la validazione email opzionale e il comportamento del placeholder della prima istanza. Il lavoro è completato quando la riproduzione mostra mat-error in modo coerente per i controlli invalid e touched senza richiedere required.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 40/100