Vscode-ng-language-service: Mendukung rangkaian opsional dalam template

Saya memiliki masalah yang sama, tetapi tidak ada solusi yang diusulkan yang berhasil:
"formulir? .get ('nama'). error.required"
"formulir? .get ('nama'). kesalahan. ['diperlukan']"
"formulir? .get ('nama'). kesalahan?. diperlukan"

Halo, coba seperti ini.
Form.hasError ('wajib');

Itu berhasil untuk saya. Terima kasih @antonheck

ada beberapa solusi, masing-masing lebih baik untuk situasi yang berbeda, ya. Tapi bukan itu masalahnya. Saya tidak harus menulis kode saya secara berbeda, termasuk jelek, sintaxe hacky, hanya untuk menenangkan ekstensi IDE, ketika apa yang saya tulis benar dari awal.

Saya memiliki masalah dan pesan yang persis sama dengan kode serupa ini:

class MyComponent {
  form: FormGroup;
}

dengan garis seperti ini di template:

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

Pesan eror :

Pengenal 'email' tidak ditentukan. '__type' tidak berisi anggota seperti itu

Masalah disebabkan oleh bidang jenis seperti (terjadi dengan AbstractControl atau yang lainnya tentu saja):

{  [key: string]: AbstractControl;  };

Saya memiliki pesan ini di Visual Studio Code (Windows) dan Angular Language Services, tetapi tidak dengan ng lint .

Solusi terbaik sejauh ini:

Coba tambahkan "!!".
Meski rumit,
Saya berhasil dengan cara ini.

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

Terima kasih tmrony, solusi terbaik setelah beberapa hari mencari ...

Sebenarnya seharusnya seperti ini, sorotan kesalahan ditampilkan karena properti "error" dari "AbstractControl" tidak memiliki properti yang ditentukan secara ketat, ini berjenis " ValidationErrors "

Jadi mengakses langsung aturan validasi menyebabkan kesalahan, dalam kasus saya mengaksesnya menggunakan notasi braket persegi memecahkan masalah.

(btw bahkan jika saya mengakses properti validasi secara langsung, saya tidak mendapatkan kesalahan kompilasi, aplikasi berfungsi dengan baik)

Cara lain untuk melakukannya adalah dengan menggunakan metode "hasError" dari kontrol:

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

@ boban984 Solusi berhasil ....

@adickenscheidt Solusi berhasil untuk saya! Terima kasih

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

"price? .errors? .required" juga harus berfungsi, karena "nama lengkap? .errors? .required" saya berfungsi.

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

Itu tidak memicu compiler 'pengenal tidak ditentukan' tetapi itu bukan solusi yang baik, karena jika objek kesalahan adalah nol, itu akan kesalahan pada konsol tentang itu.

@boban
ini adalah solusi dan penjelasan pemenang.

Saya senang menemukan metode hasError() yang dibahas di sini, ini tentu cara paling jelas untuk menunjukkan maksud dari templat bersyarat dan saya pikir saya akan mencoba menggunakannya secara eksklusif untuk selanjutnya.

Namun ... tidak ada yang menangani akar penyebab masalahnya, dan ini telah menjadi masalah dengan layanan bahasa selama kira-kira setahun sekarang. Properti errors memiliki tanda tangan indeks kunci ( [key: string]: any ) yang berarti bahwa dalam kode TS, pernyataan myControl.errors.anythingYouLike akan terkompilasi dengan rapi, tidak peduli flag mode-ketat apa yang telah Anda setel . Ini benar, karena tujuan utama memiliki tanda tangan indeks seperti itu adalah agar dapat membuat properti arbitrer pada waktu proses, dan mengaksesnya dengan notasi titik atau notasi indeks. Layanan bahasa memungkinkan indeks-notasi, itulah sebabnya control?.errors['required'] berfungsi, tetapi menandai notasi titik sebagai salah, yang merupakan kesalahan.

tiga solusi:

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

Saya suka yang terbaik ketiga

@ boban984 Solusi dan penjelasan yang bagus

terima kasih, bekerja untuk saya !. 👍🏼
Saya benci melihat Kesalahan di konsol 😬

Halo, coba seperti ini.
Form.hasError ('wajib');

Ini adalah solusi paling elegan, dan benar-benar berfungsi untuk semua kasus: myForm.hasError ('required', 'myField').

Terima kasih @antonheck

Halo, coba seperti ini.
Form.hasError ('wajib');

Ini adalah solusi paling elegan, dan benar-benar berfungsi untuk semua kasus: myForm.hasError ('required', 'myField').

Ini berfungsi, tetapi solusi terbaik berdasarkan kesederhanaan ditawarkan oleh @ boban984 : "myField.hasError ('required')". :)

Saya memecahkan masalah ini dengan cara ini:

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

Saya berharap dapat membantu.

Sempurna @bePericon, ini cocok untuk saya!
Terima kasih!

<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>
Ini berhasil untuk saya di Angular 7

Jadi setelah dua tahun, belum diperbaiki? 🤣
terkait: https://github.com/angular/vscode-ng-language-service/issues/110

Jadi setelah dua tahun, belum diperbaiki? 🤣
terkait: # 110

Ini bukan bug, itu cara kerjanya yang seharusnya

Jika ini adalah fungsionalitas yang diharapkan, dapatkah dokumentasi diperbarui? (lihat di sini untuk satu contoh).

Ini dengan jelas menyimpulkan pengakses properti mentah ngModel dapat digunakan, di mana utas ini telah ditetapkan, mereka pasti tidak bisa.

Sebenarnya apakah sudah diperbaiki? Saya beralih ke hasError berabad-abad yang lalu, tetapi sekarang saya mencoba dan gagal mereproduksi kesalahan tersebut. myControl.errors.maxlength tidak menghasilkan warna merah berlekuk-lekuk untuk saya. Ini dengan ekstensi layanan bahasa 0.801.1, yang menggunakan v8.1.x pustaka, jika itu membantu.

@ thw0rted jadi, setelah tes ulang dengan myControl.errors.required dan .pattern dan (menyadari saya melewatkan atribut required pada tag input, yang menyebabkan kegagalan yang lebih besar), mereka tidak cukup berhasil.

Required sebagian besar berfungsi, meskipun ada beberapa kesalahan aneh yang muncul (gagal menangkapnya dan sayangnya tidak konsisten), dan pattern ketika polanya salah tetapi tampaknya tidak diperbarui saat polanya benar.

Juga, saya memiliki ekstensi bahasa vsCode yang sama, dan saya masih melihat coretan aneh.

Akan tetap menggunakan solusi .hasError untuk saat ini, dan mungkin masih akan merekomendasikan agar dokumen diperbarui, setidaknya untuk memilikinya sebagai penggunaan praktik yang lebih jelas / terbaik.

Saya menemukan bahwa kesalahan ini muncul setiap kali Anda mereferensikan properti yang didefinisikan sebagai 'any'. Solusi lain adalah menggunakan anotasi properti braket, clientFirstName? .Errors ['required'] yang juga cukup bodoh.

Ini menghapus kesalahan untuk saya. Sebagai referensi, kode berfungsi bahkan ketika kesalahan diuraikan, saya hanya tidak suka melihat garis merah di kode saya.

Ya, memasukkan kunci sebagai string menghilangkan garis merah.

Tapi Anda kehilangan fitur seperti ejaan yang benar dan pelengkapan otomatis dengan ini.

Selain menggunakan hasError (), mengakses kontrol anak formulir harus menggunakan get () daripada akses titik itu. misalnya

class MyComponent {
  form: FormGroup;
}

dengan garis seperti ini di template:

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

Pesan eror :

Pengenal 'email' tidak ditentukan. '__type' tidak berisi anggota seperti itu

solusinya adalah:

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

Masalah yang sama.

f.email.errors.email.required Kegagalan
!! f.email.errors.email.required Kegagalan
f.email?.errors.email.required Kegagalan
f? .email? .errors.email.required Kegagalan
f.email.error. ['required'] Gagal
f.email?.error.['required '] Gagal

Ini berhasil untuk saya:

f ['email']. error.required

Harus diperbaiki dengan https://github.com/angular/angular/pull/33884.

Masalah ini telah dikunci secara otomatis karena tidak ada aktivitas.
Ajukan masalah baru jika Anda mengalami masalah yang serupa atau terkait.

Baca lebih lanjut tentang kebijakan penguncian percakapan otomatis kami.

_{_Tindakan ini telah dilakukan secara otomatis oleh bot._}