Açısal: Koşullu özel doğrulama nasıl uygulanır?

Bazı kişisel aile ayrıntılarını doldurmak için bir formumuz olduğunu varsayalım: ad, doğum tarihi, ortak bilgileri ve çocuk ayrıntıları.

bunun gibi:

Ve çocuk adının gerekli olmasını istiyoruz, ancak yalnızca kullanıcının çocuk sahibi olmadığı zamanlarda çocukları varsa, onay kutusunu işaretlemelidir: Çocuğum yok

Ayrıca, çocuğun doğum tarihinin yalnızca çocuk adı doldurulmuşsa gerekli olmasını istiyoruz.

Bu nedenle, özel bir doğrulama gerekli yazıyorum. Eğer boolean giriş alırsa, eğer giriş doğruysa, kontrolün değeri olmalı.

Bu çok basit bir validatördür:

Ve işte benim formum:

Ancak, bu uygulamayla, kontrole dokunmadan "çocuksuz" onay kutusunu tekrar işaretler ve işaretini kaldırırsam, doğrulama durumu değişmez.

İşte bozuk davranış:

Çocuk adı kontrolü geçersiz, ayrıca “çocuk yok” onay kutusunu işaretlesem de, açısal yeniden doğrulamanın gerekmediğini bilmiyor.

Doğum tarihi için de aynı, çünkü başlangıçta ad boştu, sonra doğum tarihi geçerliydi, ismini doldursam bile. ve doğum tarihinin şimdi geçersiz olmasını bekliyorum.

Kontrol validasyon durumu sadece kontrol değeri değiştirildiyse değiştirilir, validasyon girişi değiştirildiyse değiştirilmez.

Hack ne olacak?

validator arayüzünü görelim:

İkinci yöntemin amacı nedir?

Bu yöntem, validasyon değiştirilen fonksiyonun validator uygulamasına kaydedilmesi için açısal bir uç noktadır ve validator, validator uygulamasına değiştirilmiş validasyon yükseltmek istediğinde, örneğin validasyon girişi değiştirilmişse, onu arayabilir.

Bunu validatörümüzde uygulayalım:

Yönerge girişinde bir değişiklik olması durumunda, o zaman bize kayıtlı olan this._onChange () işlevini çağırırız. ve daha sonra açısal, yeniden doğrulanması gerektiğini ve durumun değiştiğini bilir.

Şimdi işe yarayacak, geçersiz alanı belirten kırmızı kenarlık rengini uygulayın ve buna dokunmadığımda da geçersiz ve geçerli olduğunu görün.

tam kod örneğine bakın

Açısal inşa geçersizliğini kontrol edin. ve onları yukarıda açıklandığı gibi uyguladıklarını bulun. örneğin maxLength:

Reaktif formu

Şimdiye kadar çok iyi, ama reaktif biçimde nasıl çalışacak? bir direktife bile sahip olmadığımda, sadece validatorFn:

Buradaki sorun, form denetimini oluşturmak için kullandığım validationFn, yalnızca form kontrolü alabilen, giriş olmadığı anlamına gelir, girişin kapanışta tanımlanabildiği ancak değiştirilemeyen bir işlev döndürmesi gerekir…

Değişken nesne girişi olmadığı sürece…

Bunu girdiyi değişken yapalım:

Burada, gerekli değeri değiştirirsem, doğrulama yöntemi yenilenen değerle çalışabilir, ancak yine de iptal edilmez, yalnızca kontrolün kendisine dokunduğumda, reaktif formlarda yukarıda açıklanan hack'i yapamam , çünkü ben hiç direktif kullanmadım.
Bunu bulmamın yolu girdi değişikliklerini kaydetmektir ve validasyon döngüsünü iptal eden control.updateValueandValidity () öğesini çağırın.

Bakın, Github'da açtığım bu sorunu anlatan bir sorun.

Ayrıca, burada reaktif formda aynı kod var, çok karmaşık, yukarıdaki sorunun çözüleceğini ve daha kolay olacağını umuyorum.