angular / angular/components

bug(mat-form-field): mat-error not displayed when form field is in an error state.

Offen
#19,960 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Reproduction

The Stackllitz app (https://stackblitz.com/edit/yz1dhz-m5re6l) renders two form controls in a form group:

1. A [mat-select](https://material.angular.io/components/select/overview)
2. A [custom form field control](https://material.angular.io/guide/creating-a-custom-form-field-control) (wraps Codemirror)

Both form controls are immediately invalid because they are initailized with null and have a required validator. The error message for each form control is displayed in ``.

Steps to reproduce:
1. Select "Foo" from the `` form control to set the corresponding validator on the second form control (the custom form field).
3. The error message for the second form control is correctly displayed `{ "required": true, "message": "Must be Foo" }`.
4. Enter the value "Foo" into the second form control to move the form control to a valid state.
5. The `` is shown. All good so far :)
6. Select "Bar" from the first form control to set a different validator.
7. The second form control is in an error state and the form field is displayed with a solid red color underline.
8. `` is NOT displayed and the `` is.

![image](https://user-images.githubusercontent.com/1623996/87334183-c3f47700-c52d-11ea-8359-f4e8290d76f2.png)


#### Expected Behavior

`` is hidden and `` is displays `{ "message": "Must be Bar" }`

#### Actual Behavior

`` is hidden and `` is displays `I am a hint.`

#### Environment

- Angular: 9.1.6
- CDK/Material: 9.2.3
- Browser(s): Chrome Version 83.0.4103.116 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): ArchLinux

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und vergleiche das mat-select mit dem benutzerdefinierten Formularfeld-Steuerelement, das Codemirror umschließt. Verfolge, wie mat-form-field nach den Änderungen am Validator zwischen mat-error und mat-hint auswählt; als erledigt gilt es, wenn die Fehlermeldung "Must be Bar" angezeigt und der Hinweis ausgeblendet 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
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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