angular / angular/components

feat(mat-form-field): simplified errorstatematcher

Abierto
#28,632 0 comentarios 1 reacción 0 asignados Ver en GitHub
area: material/form-field feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Feature Description

I've got a simple input field that just uses an ngModel for a username and password, and on error uses a signal for error state.

I would like to use signals to update the form's error state, but it seems like I need to bind an errorStateMatcher to a boring, repetitive throwaway chunk of code in my controller, because errorStateMatcher isn't just a boolean thing, it's an object that has one property (isErrorState) that is a function that takes some arguments etc. This is some java masquerading as typescript if I ever saw it (editorializing over).

### Use Case

```
class LoginControl {
username = '';
password = '';
status = signal({username: false, password: false});
async tryLogin() {
try {
await doSomeLogin(this.username, this.password);
} catch (e) {
if (e.badPassword) {
this.status.set({username: false, password: true});
// etc
```

in my template:

```

Password

^^^ what I want (or [simpleErrorState] if you don't want me overriding something important
woops

```

what I do instead is have to make

```
passwordInvalid = {
isErrorSate: () => this.error().password,
};
```

on my controller and boy howdy is that bad ergonomics. It's repetitive, and more importantly it obscures the real nature of the value. What if I accidentally do the wrong error property in the controller method? easy mistake to make when copy-pasting and hard to notice when the inlined value is not there.

As far as I can tell, the only reason this is the case is that we want to pass some lambda to the errorstatematcher, but it would *really* be great if these shiny new input signals and stuff would handle this.

Yes, I know I can just make a formgroup and write a reactive form. That's overkill and a ton of extra crust for two fields and a button.

AS AN ALTERNATIVE, I would accept: presence of a mat-error in the formfield automatically sets errorState to true, and then I can just wrap all these in `@if (error().email) { woops }` sorts of things. Based on the number of yaqs... i mean stack overflow comments I've seen about this, it seems like this is what a lot of developers think the behavior should be anyway. I'll admit that I thought the same thing. It's a little odd, having an API defined by "what child elements are in your tree" but you opened that door when you made mat-form-fields bind garbage on the child form input element. Not that I can think of a better approach here, honestly.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la API errorStateMatcher de mat-form-field y compárala con el uso en la plantilla y la solución alternativa en el controlador que se muestran en el issue. Determina cuál de los comportamientos de API propuestos debería admitirse y, después, verifica que un estado de error booleano controlado por una signal pueda expresarse sin el objeto matcher repetitivo y que la alternativa mat-error se comporte como se espera.

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
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.