Vscode-ng-language-service: دعم تسلسل اختياري في القالب

يحدث أيضًا على OS X 10.11.6 (El Capitan).

نظام التشغيل: OS X 10.11.6
إصدار الامتداد: 0.1.4
إصدار كود VS: 1.15.1

حصلت أيضًا على هذه المشكلة في Window 10 x64
إصدار الامتداد 0.1.7
الإصدار 1.15.1 من VS Code
الرجاء إصلاحه قريبا

نفس المشكلة هنا.
الخطأ هو: "أخطاء المعرف" غير محددة. لا يحتوي "NgModel" على مثل هذا العضو ".

نظام التشغيل: macOS 10.13
الامتداد: 0.1.7
كود VS: 1.16.1
الزاوي: 4.4.3
الطباعة المطبوعة: 2.5.2

نفس المشكلة! اي حل؟

هل يجب عليّ استيراده في app.module أو في المكون الخاص بي حيث يوجد النموذج؟

لن تحل الواردات @ angular / Forms التي ذكرها
نوع من الأمور ذات الصلة: https://github.com/angular/vscode-ng-language-service/issues/179

نعم لم يعمل معي أيضا ...

لدي نفس المشكلة .... أي حل؟

نفس المشكلة ، هل وجد أي شخص حلًا؟

نفس المشكلة هنا. أي أفكار بعد؟

أنا أيضا حصلت على هذه المشكلة أي حلول

نفسه هنا.

يبدو أنني لست وحدي :)

الكثير من الناس حصلوا على هذه المشكلة يمكنكم منع ذلك مثل "البريد الإلكتروني؟. Error.required"

@ Duanthse03268 نجح هذا عن طريق إزالة خطأ الخط الأحمر ولكن لا يزال هناك خطأ وحدة التحكم التالية ، أي فكرة لماذا؟

FoodFormComponent.html:9 ERROR TypeError: Cannot read property 'minlength' of undefined at Object.eval [as updateDirectives] (FoodFormComponent.html:10) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056) at checkAndUpdateView (core.es5.js:12236) at callViewAction (core.es5.js:12601) at execComponentViewsAction (core.es5.js:12533) at checkAndUpdateView (core.es5.js:12242) at callViewAction (core.es5.js:12601) at execComponentViewsAction (core.es5.js:12533) at checkAndUpdateView (core.es5.js:12242) at callWithDebugContext (core.es5.js:13456)

تأكد من استيراد ملفات
استيراد {FormsModule، Validators} من "@ angular / Forms" ؛

لا يوجد حل من الحلول في هذا الموضوع يحل المشكلة. لقد صنعت مثالًا بسيطًا قدر الإمكان للتأكد من عدم وجود شيء آخر يفسد الأمر:

تم استيراد FormModule و Validators من @ angular / Forms. لقد اختبرت هذا الحل أيضًا بواسطة @ Duanthse03268 ، ولم يقتصر الأمر على أنه لا يحل مشكلة الخط الأحمر فحسب ، بل إنه يتسبب أيضًا في حدوث خطأ في وحدة التحكم عندما تتغير حالة myField (TypeError: لا يمكن قراءة الخاصية 'مطلوبة' من null) إذا تم استخدامها بدون "؟" بعد "الأخطاء".

يعمل تطبيقي بدون أخطاء في المتصفح ولكنه يحتفظ بالخط الأحمر (المفترض أنه غير صحيح) في المحرر (VSCode). جوهر الملفات المعنية (كل شيء آخر يمكنك ببساطة "إعادة إنتاجه ..."):

app.module.ts
app.component.ts
app.component.html

إصدارات:

الامتداد: 0.1.7
كود VS: 1.19.1
زاوية CLI: 1.6.3
العقدة: 9.2.1
نظام التشغيل: macOS 10.12.6
الزاوي: 5.1.3
الكروم: 63.0.3239.84

لماذا لم تحاول استخدام "myfield؟ .error.required".

لقد جربته ، تمامًا كما كتبت في تعليقي السابق: "لا يقتصر الأمر على أنه لا يحل مشكلة الخط الأحمر فحسب ، بل إنه يتسبب أيضًا في حدوث خطأ في وحدة التحكم عندما تتغير حالة myField (TypeError: لا يمكن قراءة الخاصية 'مطلوبة' من null ) ".

لذلك ، للتوضيح ، لا يعمل "myField؟ .errors.required" ويتسبب في عرض رسالة الخطأ أعلاه في وحدة التحكم. ال '؟' يجب كتابته بعد "أخطاء" حتى يعمل هذا الرمز في المتصفح بدون رسالة خطأ ، ومع ذلك لا يحل المشكلة الأصلية المتعلقة بالخط الأحمر غير الصحيح في المحرر.

هذا أمر مزعج للغاية حيث لا تزال الخطوط الحمراء موجودة ولكن الوظيفة تعمل. أنا أتفق مع joonashak لأن الحلول المقدمة لا تعمل وتجربة كلا التنسيقين لا تحل المشكلة.

هذا عمل لي:

الحلول فقط :(

IntelliJ يلقي نفس الخطأ بالنسبة لي. لكن التنفيذ يعمل حتى مع وجود أخطاء في المتصفح. الحل البديل من Ahnset عمل لي. هل ترغب في معرفة ما هي هذه البنية وكيف تعمل الآن؟

لقد وجدت أن هذا الخطأ يظهر في كل مرة تشير فيها إلى خاصية تم تعريفها على أنها "أي". حل آخر هو استخدام التعليق التوضيحي لخاصية القوس ، clientFirstName؟ .errors ['required'] وهو أيضًا غبي جدًا.

أصبح الأمر أسوأ ، مع التحديث الأخير لـ vscode ، أصبحت شجرة ملفي أشبه بشجرة عيد الميلاد: Christmas_tree:

adickenscheidt شكرًا لك على الحل البديل. يعمل بشكل رائع ، موافق غبي الآن.

تمت إزالة Angular Language Service ...

@ Duanthse03268 تعمل

تضمين التغريدة
شكرا هذا الحل يعمل لي

انها عملت. محل تقدير كبير @ Duanthse03268

@ Duanthse03268 تعمل

لا يعمل مع خاصية الكائن المتداخلة
<mat-select [(ngModel)]="object?.nestedObject?.property" name="property" #property="ngModel">
الحصول على أخطاء تحليل فائقة البرودة على object?.object?.property

انا استعمل هذا. قبيح لكنه يعمل.
name?.errors && name?.errors['required']

Email.errors ['required'] عملت معي

@ guignol1981 الحل يعمل بالنسبة لي.

استخدام هذا يعمل بالنسبة لي:

لدي نفس المشكلة ، لكن لم تنجح أي من الحلول المقترحة:
"form؟ .get ('name'). errors.required"
أخطاء "form؟ .get ('name').. ['required']"
"form؟ .get ('name'). errors؟. required"

مرحبا جربها هكذا.
Form.hasError ('مطلوب') ؛

هذا عمل معي. شكرا 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 .

أفضل حل حتى الآن:

حاول قبل "!!".
على الرغم من أنها صعبة ،
لقد نجحت بهذه الطريقة.

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

شكرا tmrony ، أفضل حل بعد عدة أيام من البحث ...

في الواقع ، من المفترض أن تكون على هذا النحو ، يظهر تمييز الخطأ لأن خاصية "الأخطاء" في "AbstractControl" لا تحتوي على خصائص محددة بدقة ، فهي من النوع " 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']" -> نجح

لا يؤدي ذلك إلى تشغيل "المعرف غير محدد" للمترجم ولكنه ليس حلاً جيدًا ، لأنه إذا كان كائن الأخطاء فارغًا ، فسيتم خطأ في وحدة التحكم بشأنه.

@ 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 حل

شكرا ، يعمل لي !. 👍🏼
أكره عرض الأخطاء على وحدة التحكم 😬

مرحبا جربها هكذا.
Form.hasError ('مطلوب') ؛

كان هذا هو الحل الأكثر أناقة ، وينجح حقًا في جميع الحالات: myForm.hasError ('مطلوب' ، 'myField').

شكراantonheck

مرحبا جربها هكذا.
Form.hasError ('مطلوب') ؛

كان هذا هو الحل الأكثر أناقة ، وينجح حقًا في جميع الحالات: myForm.hasError ('مطلوب' ، 'myField').

إنه يعمل ، ولكن أفضل حل يعتمد على البساطة قدمه @ boban984 : "myField.hasError ('مطلوب')". :)

لقد حللت هذه المشكلة بهذه الطريقة:

• 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://github.com/angular/vscode-ng-language-service/issues/110

إذن بعد عامين ، لم يتم إصلاحه؟ 🤣
ذات الصلة: # 110

إنه ليس خطأ ، إنه بالضبط الطريقة التي يجب أن يعمل بها

إذا كانت هذه الوظيفة متوقعة ، فهل يمكن تحديث الوثائق؟ (انظر هنا للحصول على مثال واحد).

من الواضح أن هذا يشير إلى إمكانية استخدام موصّلات الخاصية الأولية ngModel ، حيث أثبت هذا الموضوع أنهم لا يستطيعون ذلك بالتأكيد.

في الواقع هل تم إصلاحه؟ لقد تحولت إلى hasError منذ زمن بعيد ، لكنني الآن أحاول وأفشل في إعادة إنتاج الخطأ. لا ينتج عن myControl.errors.maxlength أي لون أحمر متعرج. هذا مع ملحق خدمة اللغة 0.801.1 ، والذي يستخدم v8.1.x للمكتبة ، إذا كان ذلك يساعد.

@ thw0rted لذلك ، عند إعادة الاختبار باستخدام myControl.errors.required و .pattern و (أدركت أنني فاتني السمة required على علامة الإدخال ، والتي كانت تسبب فشلًا أكبر) ، لم يفعلوا ذلك عمل جيد.

Required الغالب ، على الرغم من وجود بعض الأخطاء الفردية التي ظهرت (لم يتم التقاطها وهي غير متسقة للأسف) ، ويتم تشغيل pattern عندما يكون النمط خاطئًا ولكن لا يبدو أنه يتم تحديثه عندما يكون النمط صحيحًا.

أيضًا ، لدي نفس امتداد لغة vsCode ، وما زلت أرى متعرجة بشكل غريب.

الذهاب إلى حل .hasError في الوقت الحالي ، وربما لا يزال يوصي بتحديث المستندات ، على الأقل لاستخدامها بشكل أوضح / أفضل ممارسة.

لقد وجدت أن هذا الخطأ يظهر في كل مرة تشير فيها إلى خاصية تم تعريفها على أنها "أي". حل آخر هو استخدام التعليق التوضيحي لخاصية القوس ، 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 Fails
f؟ .email؟ .errors.email.required Fails
f.email.error. ['required'] فشل
f.email ؟. خطأ. [مطلوب '] فشل

نجح هذا بالنسبة لي:

f ["البريد الإلكتروني"]. errors.required

يجب أن تكون ثابتة بـ https://github.com/angular/angular/pull/33884.

تم قفل هذه المشكلة تلقائيًا بسبب عدم النشاط.
يرجى تقديم مشكلة جديدة إذا كنت تواجه مشكلة مشابهة أو ذات صلة.

اقرأ المزيد حول سياسة قفل المحادثة التلقائي .

_{_تم تنفيذ هذا الإجراء تلقائيًا بواسطة روبوت.}