Vscode-ng-language-service: 支持模板中的可选链接

我有同样的问题，但是没有一个建议的解决方案起作用：
“ form？.get（'name'）。errors.required”
“表单？.get（'name'）。错误。['必需']”
“ form？.get（'name'）。errors..required”

您好尝试这样。
Form.hasError（'required'）;

那对我有用。 谢谢@antonheck

有一些变通办法，每个变通办法都适合于不同情况，是的。 但这不是问题。 当我从一开始就编写正确的代码时，我不必以不同的方式编写代码，包括丑陋的，骇人的sintaxe，而只是为了安抚IDE扩展。

我有与此类似的代码完全相同的问题和消息：

class MyComponent {
  form: FormGroup;
}

在模板中带有这样的行：

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

错误信息 ：

未定义标识符“电子邮件”。 '__type'不包含此类成员

问题是由类似类型的字段引起的（它发生在AbstractControl或其他东西中）：

{  [key: string]: AbstractControl;  };

我在Visual Studio Code（Windows）和Angular Language Services中有此消息，但没有ng lint 。

迄今为止最好的解决方案：

尝试添加“ !!”。
虽然很棘手，
我这样成功了。

_from： https :

感谢tmrony，这是经过数天搜索的最佳解决方案...

实际上应该是这样，因为“ AbstractControl”的“ errors”属性没有严格定义的属性，而是“ ValidationErrors ”类型，因此显示了错误高亮显示

因此，直接访问验证规则会导致错误，在我的情况下，使用方括号表示法可以解决此问题。

（顺便说一句，即使我直接访问验证属性，但没有收到编译错误，该应用程序仍然可以正常运行）

另一种方法是使用控件的“ hasError”方法：

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

@ boban984解决方案成功了...

@adickenscheidt解决方案为我工作！ 谢谢

“ price.errors ['required']”->正常工作
“ !! price.errors.required”->起作用

“ price？.errors..required”也应该起作用，因为我的“ fullname？.errors..required”有效

“ price.errors ['required']”->正常工作

这不会触发编译器“未定义标识符”，但这不是一个好的解决方案，因为如果errors对象为null，它将在控制台上引起错误。

@ boban984
这是获胜者的解决方案和解释。

我很高兴找到这里讨论的hasError()方法，它肯定是显示条件模板意图的最清晰方法，我想我会尽力使用它。

但是...没人在解决问题的根本原因，而语言服务已经是大约一年以前的问题了。 errors属性具有键索引签名（ [key: string]: any ），这意味着在TS代码中，无论您设置了什么严格模式标志，语句myControl.errors.anythingYouLike都可以干净地编译。 。 这是正确的，因为具有这样的索引签名的全部目的是能够在运行时创建任意属性，并通过点符号或索引符号访问它们。 语言服务允许使用索引符号，这就是为什么control?.errors['required']起作用的原因，但是将点符号标记为不正确，这是一个错误。

三种解决方案：

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

我喜欢第三好的

@ boban984很棒的解决方案和解释

thnks，为我工作！ 👍🏼
我讨厌在控制台上查看错误😬

您好尝试这样。
Form.hasError（'required'）;

这是最优雅的解决方案，并且确实适用于所有情况：myForm.hasError（'required'，'myField'）。

谢谢@antonheck

您好尝试这样。
Form.hasError（'required'）;

这是最优雅的解决方案，并且确实适用于所有情况：myForm.hasError（'required'，'myField'）。

它可以工作，但是@ boban984提供了基于简单性的最佳解决方案：“ myField.hasError（'required'）”。 :)

我以这种方式解决了这个问题：

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

希望对您有所帮助。

完美@bePericon这对我
谢谢！

<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>
这在Angular 7中对我有用

那么两年后还没有解决？ 🤣
相关： https :

那么两年后还没有解决？ 🤣
相关：＃110

这不是错误，而是它应该工作的方式

如果这是预期的功能，可以更新文档吗？ （参见此处的一个示例）。

显然，这可以推断可以使用ngModel的原始属性访问器，而该线程已确定它们绝对不能使用。

其实是固定的吗？ 很久以前我切换到hasError，但是现在我正在尝试并且无法重现该错误。 myControl.errors.maxlength不会为我产生任何红色波浪状。 这与语言服务扩展0.801.1配合使用，该扩展使用库的v8.1.x（如果有帮助）。

@ thw0rted因此，在用myControl.errors.required和.pattern重新测试后，（意识到我错过了input标签上的required属性，这导致了更大的失败），他们没有很好的工作。

Required多数有效，但是会弹出一些奇怪的错误（缺少捕获错误，不幸的是它们不一致），并且pattern在模式错误但似乎未更新时触发当模式正确时。

另外，我有相同的vsCode语言扩展，但仍然奇怪地看到弯曲。

目前要坚持使用.hasError解决方案，并且可能仍会建议对文档进行更新，至少是将其作为更清晰/最佳实践使用。

我发现，每当您引用定义为“ any”的属性时，都会出现此错误。 另一个解决方法是使用括号属性注释clientFirstName？.errors ['required']，它也很愚蠢。

这为我消除了错误。 作为参考，即使在概述了错误的情况下，该代码仍然有效，我只是不喜欢在代码中看到红线。

是的，将密钥作为字符串放入会删除红线。

但是您将失去诸如正确拼写和自动完成功能之类的功能。

除了使用hasError（）之外，访问窗体的子控件还应该使用get（）而不是点访问。 例如

class MyComponent {
  form: FormGroup;
}

在模板中带有这样的行：

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

错误信息 ：

未定义标识符“电子邮件”。 '__type'不包含此类成员

解决方案是：

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

同样的问题。

f.email.errors.email.required失败
!! f.email.errors.email.required失败
f.email?.errors.email.required失败
f？.email？.errors.email.required失败
f.email.error。['必需']失败
f.email?.error。['必需']失败

这对我有用：

f ['email']。errors.required

应该用https://github.com/angular/angular/pull/33884修复

由于不活动，此问题已自动锁定。
如果您遇到类似或相关的问题，请提出新的问题。

阅读有关我们的自动对话锁定策略的更多信息。

_{_此动作已由漫游器自动执行。_}