ElementInternals ile Özel Form Denetimleri Oluşturma

0
13

Zamanın başlangıcından beri, insanlık biçim unsurları üzerinde daha fazla kontrole sahip olmayı hayal etti. Tamam, biraz abartıyor olabilirim, ancak form bileşenlerini oluşturmak veya özelleştirmek yıllardır ön uç web geliştirmenin kutsal bir kasesi oldu.

Özel öğelerin daha az müjdeli, ancak en güçlü özelliklerinden biri (ör. ) 77 sürümünden itibaren sessizce Google Chrome’a ​​girdi ve diğer tarayıcılarda da yoluna devam ediyor. ElementInternals standardı, çok alçakgönüllü bir ada sahip çok heyecan verici bir özellik setidir. Dahili bileşenlerin eklediği özellikler arasında, erişilebilirlik kontrolleri etrafında formlara ve bir API’ye katılma yeteneği vardır.

Bu makalede, özel bir form kontrolünün nasıl oluşturulacağına, kısıtlama doğrulamasının nasıl entegre edileceğine, dahili erişilebilirliğin temellerini tanıtmaya ve bu özellikleri son derece taşınabilir bir makro form kontrolü oluşturmak için birleştirmenin bir yolunu göreceğiz.

Tasarım sistemimizle eşleşen çok basit bir özel öğe oluşturarak başlayalım. Öğemiz, tüm stillerini gölge DOM içinde tutacak ve bazı temel erişilebilirlik sağlayacaktır. Kod örneklerimiz için Google’daki Polymer ekibinden harika LitElement kitaplığını kullanacağız ve kesinlikle ihtiyacınız olmasa da, özel öğeler yazmak için harika bir soyutlama sağlıyor.

CodePen Embed Yedeklemesi

Bu Kalemde bir bazı temel tasarıma sahip. Ayrıca formumuza vanilya HTML girişi olan ikinci bir giriş ekledik ve varsayılan bir değer ekledik (böylece gönder düğmesine basabilir ve çalıştığını görebilirsiniz).

Gönder butonumuzu tıkladığımızda birkaç şey olur. İlk olarak, sayfamızın yeniden yüklenmemesini sağlamak için bu durumda submit olayının preventDefault yöntemi çağrılır. Bundan sonra, bir JSON dizesi oluşturmak ve bunu bir öğesi. Bununla birlikte, çıktımıza eklenen tek değerin name = “lame” olan öğeden olduğuna dikkat edin.

Bunun nedeni, öğemizin henüz formla nasıl etkileşim kuracağını bilmemesidir, bu yüzden hadi ismine uymasına yardımcı olmak için bir ElementInternals örneği ile. Başlamak için, öğenin yapıcısında yöntemimizin attachInternals yöntemini çağırmamız gerekecek, ayrıca özelliği henüz desteklemeyen tarayıcılarla çalışmak için sayfamıza bir ElementInternals çoklu dolgusu da aktaracağız.

AttachInternals yöntemi, yöntemimizde kullanabileceğimiz bazı yeni API’leri içeren yeni bir öğe dahili örneği döndürür. Öğemizin bu API’lerden yararlanmasına izin vermek için, true döndüren statik bir formAssociated getter eklememiz gerekir.

sınıf RadInput, LitElement’i genişletir {statik get formAssociated () {return true; } yapıcı () {süper (); this.internals (); }}

Öğemizin internals özelliğindeki bazı API’lere bir göz atalım:

setFormValue (değer: string | FormData | Dosya, durum ?: herhangi): void – Bu yöntem, varsa, öğenin değerini üst formunda ayarlayacaktır. Değer null ise, öğe form gönderme sürecine katılmayacaktır. Form – Varsa, öğemizin üst formuna bir referans. SetValidity (bayraklar: Kısmi, message ?: string, anchor ?: HTMLElement): void – setValidity yöntemi, öğemizin form içindeki geçerlilik durumunu kontrol etmeye yardımcı olacaktır. Form geçersizse, bir doğrulama mesajı bulunmalıdır. WillValidate – Form gönderildiğinde öğe değerlendirilecekse doğru olacaktır .validity – HTMLInputElement.prototype.validity.validationMessage’a eklenmiş API’ler ve anlambilimle eşleşen bir geçerlilik nesnesi – Denetim, setValidity ile geçersiz olarak ayarlanmışsa, bu, error.checkValidity’yi açıklarken iletilen mesajdır – Öğe geçerliyse true döndürür, aksi takdirde bu false döndürür ve öğe üzerinde geçersiz bir olay tetikler.reportValidity – checkValidity ile aynı işlevi görür ve etkinlik iptal edilmezse sorunları kullanıcıya bildirir. Etiketler – Bu öğeyi etiketi kullanarak etiketleyen öğelerin listesi[for] Öğe hakkında arya bilgilerini ayarlamak için kullanılan diğer bazı kontroller.

Özel bir öğenin değerini ayarlama

Değiştirelim bu API’lerden bazılarından yararlanmak için:

CodePen Embed Yedeklemesi

Burada, elementin _onInput yöntemini this.internals.setFormValue’ye bir çağrı içerecek şekilde değiştirdik. Bu, öğemizin verilen adın altındaki forma bir değer kaydetmek istediğini söyler (HTML’de bir öznitelik olarak ayarlanır). Ayrıca, öğe oluşturma işlemi tamamlandığında öğenin değerini boş bir dizeye ayarlayan bir firstUpdated yöntemi (LitElement kullanılmadığında ConnectedCallback ile genel olarak benzer) ekledik. Bu, öğemizin her zaman formda bir değere sahip olduğundan emin olmak içindir (ve gerekli olmasa da, boş bir değer girerek öğenizi formdan çıkarmak isteyebilirsiniz).

Şimdi girdimize bir değer kattığımızda ve formu gönderdiğimizde, bizim de bir radInput değerimiz olduğunu göreceğiz. öğesi. Öğemizin HTMLFormElement’in radInput özelliğine eklendiğini de görebiliriz. Bununla birlikte, fark etmiş olabileceğiniz bir şey, öğemizin bir değeri olmamasına rağmen, form gönderiminin gerçekleşmesine yine de izin vereceğidir. Şimdi öğemize biraz doğrulama ekleyelim.

Kısıtlama doğrulama ekleme

Alanımızın doğrulamasını ayarlamak için, element internals nesnemizde setValidity yöntemini kullanmak için elementimizi biraz değiştirmemiz gerekiyor. Bu yöntem üç bağımsız değişken alacaktır (ikincisi yalnızca öğe geçersizse gereklidir, üçüncüsü her zaman isteğe bağlıdır). İlk argüman kısmi bir ValidityState nesnesidir. Herhangi bir bayrak true olarak ayarlanırsa, kontrol geçersiz olarak işaretlenecektir. Yerleşik geçerlilik anahtarlarından biri ihtiyaçlarınızı karşılamıyorsa, çalışması gereken bir tümünü yakalama customError anahtarı vardır. Son olarak, eğer kontrol geçerliyse, kontrolün geçerliliğini sıfırlamak için bir nesne değişmezi ({}) geçiririz.

Buradaki ikinci argüman, kontrolün geçerlilik mesajıdır. Bu bağımsız değişken, kontrol geçersizse gereklidir ve kontrol geçerliyse izin verilmez. Üçüncü argüman, form geçersiz olarak gönderildiğinde veya reportValidity çağrıldığında kullanıcının odağını kontrol edecek isteğe bağlı bir doğrulama hedefidir.

Yeni bir yöntem sunacağız. bizim için bu mantığı halledecek:

_manageRequired () {const {değer} = bu; const input = this.shadowRoot.querySelector (‘input’); if (value === ” && this.required) {this.internals.setValidity ({valueMissing: true}, ‘Bu alan gereklidir’, input); } else {this.internals.setValidity ({}); }}

Bu işlev, kontrolün değerini ve girdisini alır. Değer boş bir dizgeye eşitse ve öğe gerektiği gibi işaretlenmişse, internals.setValidity’yi çağıracağız ve denetimin geçerliliğini değiştireceğiz. Şimdi tek yapmamız gereken bu yöntemi firstUpdated ve _onInput yöntemlerimizde çağırmak ve elementimize bazı temel doğrulama ekleyeceğiz.

CodePen Embed Yedeklemesi

Bir değer girilmeden önce gönder düğmesine tıklamak artık ElementInternals özelliklerini destekleyen tarayıcılarda bir hata mesajı görüntüleyecektir. Maalesef, destekleyici olmayan tarayıcılarda yerleşik doğrulama açılır penceresini tetiklemenin güvenilir bir yolu olmadığından, doğrulama hatalarının görüntülenmesi hala çoklu doldurma tarafından desteklenmemektedir.

Ayrıca dahili nesnemizi kullanarak örneğimize bazı temel erişilebilirlik bilgileri ekledik. _Required öğemize, bunun için bir proxy görevi görecek ve gerekli olduğunda alıcı / ayarlayıcı olarak hizmet verecek ek bir özellik ekledik.

gerekli olsun () {bunu iade edin._gerekli; } set gerekli (isRequired) {this._required = isRequired; this.internals.ariaRequired = isRequired; }

Gerekli özelliği internals.ariaRequired’e ileterek, ekran okuyucuları öğemizin şu anda bir değer beklediği konusunda uyarıyoruz. Polyfill’de bu, arya için gerekli bir öznitelik eklenerek yapılır; ancak destekleyici tarayıcılarda, özellik öğeye eklenmez çünkü bu özellik öğenin doğasında bulunur.

Mikro form oluşturmak

Artık tasarım sistemimizi karşılayan bir çalışma girdisine sahip olduğumuza göre, öğelerimizi çeşitli uygulamalarda yeniden kullanabileceğimiz kalıplar halinde oluşturmaya başlamak isteyebiliriz. ElementInternals için en çekici özelliklerden biri, setFormValue yönteminin yalnızca dize ve dosya verilerini değil, aynı zamanda FormData nesnelerini de alabilmesidir. Diyelim ki birden fazla organizasyonda kullanılabilecek ortak bir adres formu oluşturmak istiyoruz, bunu yeni oluşturduğumuz unsurlarla kolayca yapabiliriz.

CodePen Embed Yedeklemesi

Bu örnekte, elementimizin gölge kökünün içinde oluşturulmuş bir formumuz var ve burada dört tane oluşturduğumuz bir adres formu oluşturmak için öğeler. SetFormValue’yu bir dizeyle çağırmak yerine, bu sefer formumuzun tüm değerini iletmeyi seçtik. Sonuç olarak, elemanımız alt formu içindeki her bir elemanın değerlerini dış forma aktarır.

Bu forma kısıtlama doğrulaması eklemek, içerikte ek stiller, davranışlar ve aralık sağlamak gibi oldukça basit bir süreç olacaktır. Bu yeni API’leri kullanmak nihayet geliştiricilerin özel öğelerin içindeki bir ton potansiyelin kilidini açmasına olanak tanıyor ve nihayet bize kullanıcı deneyimlerimizi kontrol etme konusunda serbest alan sağlıyor.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz