Vscode-ng-language-service: テンプレートでオプションのチェーンをサポート

私は同じ問題を抱えていますが、提案された解決策のどれもうまくいきませんでした：
"form？.get（ 'name'）。errors.required"
"form？.get（ 'name'）。errors。['required']"
"form？.get（ 'name'）。errors？.required"

こんにちは、このように試してみてください。
Form.hasError（ '必須'）;

それは私のために働いた。 ありがとう@antonheck

いくつかの回避策があり、それぞれがさまざまな状況に適しています。 しかし、それは問題ではありません。 私が書いたものが最初から正しかったとき、IDE拡張機能をなだめるためだけに、醜い、ハッキーな構文を含めて、コードを別の方法で書く必要はありません。

私はこの同様のコードでまったく同じ問題とメッセージを持っています：

class MyComponent {
  form: FormGroup;
}

テンプレートにこのような行があります：

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

エラーメッセージ ：

識別子「email」が定義されていません。 '__type'にはそのようなメンバーは含まれていません

問題は次のようなタイプのフィールドによって引き起こされます（もちろんAbstractControlまたは他の何かで発生します）：

{  [key: string]: AbstractControl;  };

このメッセージはVisualStudio 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"->動作しました

「fullname？.errors？.required」が機能するため、「price？.errors？.required」も機能するはずです。

"price.errors ['required']"->動作しました

これはコンパイラの「識別子が定義されていません」をトリガーしませんが、エラーオブジェクトがnullの場合、コンソールでエラーが発生するため、適切な解決策ではありません。

@ boban984
これが勝者の解決策と説明です。

ここで説明したhasError()メソッドを見つけてうれしかったです。これは確かに、テンプレートの意図を条件付きで示す最も明確な方法であり、今後は排他的に使用するように努めると思います。

しかし...誰も問題の根本原因に取り組んでおらず、それは1年ほどの間言語サービスの問題になっています。 errorsプロパティにはキーインデックスシグネチャ（ [key: string]: any ）があります。これは、TSコードでは、設定したstrict-modeフラグに関係なく、ステートメントmyControl.errors.anythingYouLikeがクリーンにコンパイルされることを意味します。 。 このようなインデックス署名を持つことの全体的なポイントは、実行時に任意のプロパティを作成し、ドット表記またはインデックス表記のいずれかでそれらにアクセスできるようにすることであるため、これは正しいです。 言語サービスでは添字表記が許可されているため、 control?.errors['required']機能しますが、ドット表記が正しくないことを示すフラグが立てられます。これはエラーです。

3つの解決策：

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

私は3番目に良いのが好きです

@ boban984素晴らしい解決策と説明

thnks、私のために働く！ 👍🏼
私はコンソールでエラーを表示するのが嫌いです😬

こんにちは、このように試してみてください。
Form.hasError（ '必須'）;

これは最も洗練されたソリューションであり、実際にはすべての場合に機能します：myForm.hasError（ 'required'、 'myField'）。

ありがとう@antonheck

こんにちは、このように試してみてください。
Form.hasError（ '必須'）;

これは最も洗練されたソリューションであり、実際にはすべての場合に機能します：myForm.hasError（ 'required'、 'myField'）。

それは機能しますが、単純さに基づく最良の解決策は@ boban984によって提供され

私はこの問題を次のように解決しました：

• 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>
これはAngular7で私のために働いた

それで、2年後、それは修正されていませんか？ 🤣
関連： https ：

それで、2年後、それは修正されていませんか？ 🤣
関連：＃110

それはバグではありません、それはまさにそれが機能するはずの方法です

これが期待される機能である場合、ドキュメントを更新できますか？ （1つの例についてはここを参照してください）。

これは、 ngModelの生のプロパティアクセサーが使用できることを明確に推測しますが、このスレッドはそれらが絶対に使用できないことを確立しています。

実際に修正されていますか？ 何年も前にhasErrorに切り替えましたが、現在、エラーを再現しようとして失敗しています。 myControl.errors.maxlengthは、私にとって赤い波線を生成しません。 これは、ライブラリのv8.1.xを使用する言語サービス拡張機能0.801.1を使用する場合に役立ちます。

@ thw0rtedなので、 myControl.errors.requiredと.patternを使用して再テストすると、（入力タグのrequired属性を見逃したため、より大きな失敗が発生していました）、かなりうまくいきます。

Requiredほとんど機能しますが、ポップアップするいくつかの奇妙なエラーがあり（キャプチャに失敗し、残念ながら一貫性がありません）、パターンが間違っているが更新されていないように見える場合にpattern発生しますパターンが正しいとき。

また、私は同じvsCode言語拡張を持っていますが、それでも奇妙なことに波線が見られます。

今のところ.hasErrorソリューションを使い続けるつもりですが、少なくともそれをより明確でベストプラクティスとして使用するために、ドキュメントを更新することをお勧めします。

'any'として定義されているプロパティを参照するたびに、このエラーが表示されることがわかりました。 もう1つの回避策は、ブラケットプロパティアノテーションclientFirstName？.errors ['required']を使用することです。これもかなりばかげています。

これにより、エラーが削除されました。 参考までに、エラーの概要が示されていてもコードは機能しました。コードに赤い線が表示されるのは好きではありません。

はい、文字列としてキーを入力すると、赤い線が削除されます。

ただし、これにより、正しいスペルやオートコンプリートなどの機能が失われます。

hasError（）の使用に加えて、フォームの子コントロールにアクセスするには、ドットアクセスではなくget（）を使用する必要があります。 例えば

class MyComponent {
  form: FormGroup;
}

テンプレートにこのような行があります：

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

エラーメッセージ ：

識別子「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。['required']失敗
f.email？.error。['required ']失敗

これは私のために働いた：

f ['email']。errors.required

https://github.com/angular/angular/pull/33884で修正する必要があり

この問題は、非アクティブのために自動的にロックされています。
同様の問題または関連する問題が発生した場合は、新しい問題を提出してください。

自動会話ロックポリシーの詳細をご覧ください。

_{_このアクションはボットによって自動的に実行されました。_}