Vscode-ng-language-service: Suporta encadeamento opcional no modelo

Tenho o mesmo problema, mas nenhuma das soluções propostas funcionou:
"form? .get ('name'). errors.required"
"formulário? .get ('nome'). erros. ['obrigatório']"
"formulário? .get ('nome'). erros?. necessário"

Olá, tente assim.
Form.hasError ('obrigatório');

Isso funcionou para mim. Obrigado @antonheck

existem algumas soluções alternativas, cada uma melhor para uma situação diferente, sim. Mas essa não é a questão. Eu não deveria ter que escrever meu código de forma diferente, incluindo uma sintaxe feia e hacky, apenas para apaziguar uma extensão IDE, quando o que escrevi estava certo desde o início.

Tenho exatamente o mesmo problema e mensagem com este código semelhante:

class MyComponent {
  form: FormGroup;
}

com linhas como esta no modelo:

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

Mensagem de erro :

O identificador 'email' não foi definido. '__type' não contém tal membro

O problema é causado por campos do tipo (ocorre com AbstractControl ou outra coisa, é claro):

{  [key: string]: AbstractControl;  };

Eu tenho esta mensagem no Visual Studio Code (Windows) e Angular Language Services, mas não com ng lint .

Melhor solução até agora:

Tente prefixar "!!".
Embora seja complicado,
Eu consegui dessa forma.

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

Obrigado tmrony, melhor solução depois de muitos dias pesquisando ...

Na verdade é para ser assim, o destaque do erro é mostrado porque a propriedade "errors" de "AbstractControl" não tem propriedades estritamente definidas, é do tipo " ValidationErrors "

Portanto, acessar diretamente uma regra de validação está causando o erro; no meu caso, acessá-la usando a notação de colchetes resolve o problema.

(btw, mesmo se eu acessar a propriedade de validação diretamente, não estou recebendo erros de compilação, o aplicativo funciona bem de qualquer maneira)

A outra maneira de fazer isso é usar o método "hasError" do controle:

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

@ boban984 A solução funcionou ....

A solução

"price.errors ['required']" -> Trabalhou
"!! price.errors.required" -> Trabalhou

"price? .errors? .required" também deve funcionar, porque meu "fullname? .errors? .required" funciona

"price.errors ['required']" -> Trabalhou

Isso não aciona o compilador 'identificador não está definido' mas não é uma boa solução, pois se o objeto de erros for nulo, ocorrerá um erro no console sobre ele.

@ boban984
esta é a solução e explicação vencedora.

Fiquei feliz em encontrar o método hasError() discutido aqui, é certamente a maneira mais clara de mostrar a intenção do modelo condicional e acho que tentarei usá-lo exclusivamente daqui para frente.

No entanto ... ninguém está abordando a causa raiz do problema, e ele tem sido um problema com o serviço de idiomas há cerca de um ano. A propriedade errors tem uma assinatura de índice de chave ( [key: string]: any ), o que significa que no código TS, a instrução myControl.errors.anythingYouLike será compilada de forma limpa, não importa quais sinalizadores de modo estrito você tenha definido . Isso está correto, porque o objetivo de ter uma assinatura de índice como essa é ser capaz de criar propriedades arbitrárias em tempo de execução e acessá-las por notação de ponto ou notação de índice. O serviço de linguagem permite a notação de índice, razão pela qual control?.errors['required'] funciona, mas sinaliza a notação de ponto como incorreta, o que é um erro.

três soluções:

<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>

Eu gosto do terceiro melhor

@ boban984 Ótima solução e explicação

obrigado, funciona para mim !. 👍🏼
eu odeio visualizar erros no console 😬

Olá, tente assim.
Form.hasError ('obrigatório');

Esta foi a solução mais elegante e realmente funciona para todos os casos: myForm.hasError ('required', 'myField').

Obrigado @antonheck

Olá, tente assim.
Form.hasError ('obrigatório');

Esta foi a solução mais elegante e realmente funciona para todos os casos: myForm.hasError ('required', 'myField').

Funciona, mas a melhor solução baseada na simplicidade foi oferecida por @ boban984 : "myField.hasError ('required')". :)

Resolvi este problema desta forma:

• 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 útil.

Perfeito @bePericon isso funciona para mim!
Obrigado!

<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>
Isso funcionou para mim no Angular 7

Então, depois de dois anos, não foi corrigido? 🤣
relacionado: https://github.com/angular/vscode-ng-language-service/issues/110

Então, depois de dois anos, não foi corrigido? 🤣
relacionado: # 110

Não é um bug, é exatamente como deveria funcionar

Se esta é a funcionalidade esperada, a documentação pode ser atualizada? (veja aqui um exemplo).

Isso infere claramente que os acessadores de propriedade brutos de ngModel podem ser usados, onde este segmento estabeleceu que eles definitivamente não podem.

Na verdade, está consertado? Mudei para hasError há muito tempo, mas agora estou tentando, sem sucesso, reproduzir o erro. myControl.errors.maxlength não gera nenhum squiggly vermelho para mim. Isso é com a extensão de serviço de idioma 0.801.1, que usa a v8.1.x da biblioteca, se isso ajudar.

@ thw0rted então, após novo teste com myControl.errors.required e .pattern e (percebi que perdi o atributo required na tag de entrada, o que estava causando uma falha maior), eles não bastante trabalho.

Required principalmente funciona, embora tenham surgido alguns erros estranhos (não foram capturados e eles são inconsistentes, infelizmente) e pattern dispara quando o padrão está errado, mas não parece se atualizar quando o padrão está correto.

Além disso, tenho a mesma extensão de linguagem vsCode e ainda vejo rabiscos estranhamente.

Vou ficar com a solução .hasError por enquanto e provavelmente ainda recomendaria que os documentos fossem atualizados, pelo menos para ter isso como um uso mais claro / de prática recomendada.

Descobri que esse erro aparece sempre que você faz referência a uma propriedade definida como 'qualquer'. Outra solução alternativa é usar a anotação de propriedade de colchetes, clientFirstName? .Errors ['required'] que também é muito estúpida.

Isso removeu os erros para mim. Para referência, o código funcionou mesmo quando os erros foram descritos, só não gosto de ver linhas vermelhas no meu código.

Sim, colocar a chave como uma string remove as linhas vermelhas.

Mas você perde recursos como ortografia correta e preenchimento automático com isso.

além de usar hasError (), acessar o controle filho de um formulário deve usar get () em vez de acesso de ponto. por exemplo

class MyComponent {
  form: FormGroup;
}

com linhas como esta no modelo:

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

Mensagem de erro :

O identificador 'email' não foi definido. '__type' não contém tal membro

solução seria:

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

O mesmo problema.

Falha de f.email.errors.email.required
!! f.email.errors.email.required Fails
f.email?.errors.email.required Fails
f? .email? .errors.email.required Falhas
f.email.error. ['obrigatório'] Falha
f.email?.error.['required '] Falha

Isso funcionou para mim:

f ['email']. errors.required

Deve ser corrigido com https://github.com/angular/angular/pull/33884.

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_{_Esta ação foi executada automaticamente por um bot._}