Vscode-ng-language-service: Admite el encadenamiento opcional en la plantilla

Tengo el mismo problema, pero ninguna de las soluciones propuestas ha funcionado:
"formulario? .get ('nombre'). errors.required"
"formulario? .get ('nombre'). errores. ['obligatorio']"
"formulario? .get ('nombre'). errores? .requiere"

Hola, inténtalo así.
Form.hasError ('obligatorio');

Eso funcionó para mí. Gracias @antonheck

hay algunas soluciones, cada una mejor para situaciones diferentes, sí. Pero ese no es el problema. No debería tener que escribir mi código de manera diferente, incluido el sintaxe feo y hacky, solo para apaciguar una extensión IDE, cuando lo que escribí fue correcto desde el principio.

Tengo exactamente el mismo problema y mensaje con este código similar:

class MyComponent {
  form: FormGroup;
}

con líneas como esta en la plantilla:

<app-errors [control]="form.controls.email">

Mensaje de error :

El identificador 'correo electrónico' no está definido. '__type' no contiene tal miembro

El problema es causado por campos de tipo como (ocurre con AbstractControl o algo más, por supuesto):

{  [key: string]: AbstractControl;  };

Tengo este mensaje en Visual Studio Code (Windows) y Angular Language Services, pero no con ng lint .

La mejor solución hasta ahora:

Intente anteponer "!!".
Aunque es complicado,
Lo logré de esta manera.

_desde: https://github.com/angular/vscode-ng-language-service/issues/126#issuecomment -366200219_

Gracias tmrony, la mejor solución después de muchos días buscando ...

En realidad, se supone que es así, el resaltado de error se muestra porque la propiedad "errors" de "AbstractControl" no tiene propiedades estrictamente definidas, es del tipo " ValidationErrors "

Entonces, acceder directamente a una regla de validación está causando el error, en mi caso, acceder a ella usando la notación de corchetes resuelve el problema.

(por cierto, incluso si accedo a la propiedad de validación directamente, no obtengo errores de compilación, la aplicación funciona bien de cualquier manera)

La otra forma de hacer esto es usar el método "hasError" del control:

   <span *ngIf="(firstName.dirty || firstName.touched) && firstName.hasError('required')">First name is required.</span>

@ boban984 La solución funcionó ....

@adickenscheidt ¡La solución funcionó para mí! Gracias

"price.errors ['required']" -> Funcionó
"!! price.errors.required" -> Funcionó

"precio? .errores? .requerido" también debería funcionar, porque mi "nombre completo? .errores? .requerido" funciona

"price.errors ['required']" -> Funcionó

Eso no activa el compilador 'el identificador no está definido' pero no es una buena solución, porque si el objeto de errores es nulo, se producirá un error en la consola al respecto.

@ boban984
esta es la solución y la explicación ganadoras.

Me alegré de encontrar el método hasError() discutido aquí, sin duda es la forma más clara de mostrar la intención de la plantilla condicional y creo que intentaré usarlo exclusivamente en el futuro.

Sin embargo ... nadie está abordando la causa raíz del problema, y ​​ha sido un problema con el servicio de idiomas durante algo así como un año. La propiedad errors tiene una firma de índice clave ( [key: string]: any ), lo que significa que en el código TS, la declaración myControl.errors.anythingYouLike se compilará limpiamente, sin importar qué indicadores de modo estricto haya establecido . Esto es correcto, porque el objetivo de tener una firma de índice como esa es poder crear propiedades arbitrarias en tiempo de ejecución y acceder a ellas mediante notación de puntos o notación de índice. El servicio de idiomas permite la notación de índices, por lo que control?.errors['required'] funciona, pero marca la notación de puntos como incorrecta, lo cual es un error.

tres soluciones:

<span *ngIf=" username.errors['email']">must be email</span>

<span *ngIf="!!username?.errors.email">must be email</span>

<span *ngIf="username.hasError('email')">must be email</span>

Me gusta el tercero mejor

@ boban984 Gran solución y explicación

gracias, funciona para mi !. 👍🏼
Odio ver los errores en la consola

Hola, inténtalo así.
Form.hasError ('obligatorio');

Esta fue la solución más elegante y realmente funciona para todos los casos: myForm.hasError ('required', 'myField').

Gracias @antonheck

Hola, inténtalo así.
Form.hasError ('obligatorio');

Esta fue la solución más elegante y realmente funciona para todos los casos: myForm.hasError ('required', 'myField').

Funciona, pero la mejor solución basada en la simplicidad la ofreció @ boban984 : "myField.hasError ('required')". :)

Resolví este problema de esta manera:

• example.component.ts:

this.myForm = this.formBuilder.group({
      field: ['', [Validators.required, Validators.maxLength(10)]]
});

get getField() { return this.myForm.get('field'); }

• example.component.html:

<div *ngIf="getField.errors" class="invalid-feedback">
  <div *ngIf="getField.hasError('required')"> Text required </div>
  <div *ngIf="getField.hasError('maxlength')"> Text maxLength </div>
</div>

Espero ser de ayuda.

Perfecto @bePericon, ¡ esto funciona para mí!
¡Gracias!

<input type="text" formControlName="name" class="form-control" placeholder="Full name"> <div *ngIf="submitted && f['name'].errors" class="alert alert-danger"> <div *ngIf="f['name'].errors.required">Full Name is required</div> </div>
Esto funcionó para mí en Angular 7

Entonces, después de dos años, ¿no se ha solucionado? 🤣
relacionado: https://github.com/angular/vscode-ng-language-service/issues/110

Entonces, después de dos años, ¿no se ha solucionado? 🤣
relacionado: # 110

No es un error, es exactamente como debería funcionar

Si esta es la funcionalidad esperada, ¿se puede actualizar la documentación? (vea aquí un ejemplo).

Esto claramente infiere que los accesos de propiedad en bruto de ngModel pueden usarse, donde este hilo ha establecido que definitivamente no pueden.

¿Está realmente arreglado? Cambié a hasError hace mucho tiempo, pero ahora estoy intentando y no puedo reproducir el error. myControl.errors.maxlength no genera ningún ondulado rojo para mí. Esto es con la extensión del servicio de idiomas 0.801.1, que usa v8.1.x de la biblioteca, si eso ayuda.

@ thw0rted así que, al volver a probar con myControl.errors.required y .pattern y (me di cuenta de que me perdí el atributo required en la etiqueta de entrada, que estaba causando una falla mayor), no bastante trabajo.

Required su mayoría funciona, aunque hubo algunos errores extraños que aparecieron (no se capturaron y son inconsistentes, desafortunadamente), y pattern activa cuando el patrón es incorrecto pero no parece actualizarse cuando el patrón es correcto.

Además, tengo la misma extensión de idioma vsCode, y todavía veo garabatos de manera extraña.

Seguir con la solución .hasError por el momento, y probablemente aún recomendaría que los documentos se actualicen, al menos para tenerlo como un uso más claro / de mejores prácticas.

Descubrí que este error aparece cada vez que hace referencia a una propiedad que se define como 'cualquiera'. Otra solución alternativa es usar la anotación de propiedad de corchetes, clientFirstName? .Errors ['required'] que también es bastante estúpido.

Esto me quitó los errores. Como referencia, el código funcionó incluso cuando se describieron los errores, simplemente no me gusta ver líneas rojas en mi código.

Sí, al introducir la clave como una cuerda se eliminan las líneas rojas.

Pero pierde características como la ortografía correcta y la autocompletación con esto.

Además de usar hasError (), acceder al control secundario de un formulario debe usar get () en lugar de acceso de puntos. p.ej

class MyComponent {
  form: FormGroup;
}

con líneas como esta en la plantilla:

<app-errors [control]="form.controls.email">

Mensaje de error :

El identificador 'correo electrónico' no está definido. '__type' no contiene tal miembro

la solución sería:

<app-errors [control]="form.get('email')">

Mismo problema.

f.email.errors.email.required Fallos
!! f.email.errors.email.required Fails
f.email?.errors.email.required Fails
f? .email? .errors.email.required Fails
f.email.error. ['required'] falla
f.email?.error.[required '] falla

Esto funcionó para mí:

f ['email']. errors.required

Debería arreglarse con https://github.com/angular/angular/pull/33884.

Este problema se ha bloqueado automáticamente debido a la inactividad.
Por favor, presente un nuevo problema si se encuentra con un problema similar o relacionado.

Obtenga más información sobre nuestra política de bloqueo automático de conversaciones .

_{_Esta acción ha sido realizada automáticamente por un bot._}