Uhlové: Ako implementovať podmienenú vlastnú validáciu

Predpokladajme, že máme formulár na vyplnenie niektorých osobných rodinných údajov: meno, dátum narodenia, podrobnosti o partnerovi a údaje o deťoch.

ako toto:

Chceme, aby sa vyžadovalo meno dieťaťa, ale iba ak má používateľ deti, keď nemá deti, mal by začiarknuť políčko: Nemám žiadne deti

Chceme tiež požadovať dátum narodenia dieťaťa, iba ak bolo vyplnené meno dieťaťa.

Takže píšem vlastnú validáciu vyžadovanúAk sa dostane boolovský vstup, ak je vstup pravdivý, potom musí mať kontrola hodnotu.

Je to veľmi jednoduchý validátor:

A tu je moja forma:

Ak však pri tejto implementácii začiarknem a znova zruším začiarknutie políčka „žiadne deti“ bez toho, aby som sa dotkol ovládacieho prvku, stav overenia sa nezmení.

Toto je prerušené správanie:

Ovládací prvok pre meno dieťaťa zostáva neplatný. Aj keď som začiarkol políčko „žiadne deti“, uhlové nevie o potrebe opätovného overenia platnosti.

Rovnaké pre dátum narodenia, pretože pôvodne bolo meno prázdne, potom bol dátum narodenia platný, aj keď meno vyplním. a očakávam, že dátum narodenia bude teraz neplatný.

stav kontroly platnosti sa zmení iba vtedy, ak sa zmení hodnota riadenia, nie ak sa zmení vstup pre potvrdenie.

Aký bude hack?

Pozrime sa na rozhranie validátora:

Aký je účel druhej metódy?

Táto metóda je koncovým bodom pre zmenu funkcie validácie uhlovej registrácie na implementáciu validátora a validátor ju môže nazvať, keď chce zvýšiť validáciu zmenenú, napríklad ak sa zmení vstup validácie.

Implementujme to do nášho overovateľa:

Ak dôjde k zmene v požiadavke na vstup direktívy, potom zavoláme this._onChange (), ktoré nás zaregistrovala uhlová. a potom uhlové vie, že je potrebné znovu overiť a stav sa mení.

Teraz to bude fungovať, postupujte podľa farby červeného orámovania, ktoré označuje neplatné pole, a zistite, že sa stane neplatným a platné aj vtedy, keď sa ho nedotknem.

pozri príklad úplného kódu

Skontrolujte neplatnosť uhlovej zostavy. a zistia, že ich implementujú tak, ako je opísané vyššie. napríklad maxLength:

Reaktívna forma

Zatiaľ je to dobré, ale ako to bude fungovať v reaktívnej forme? keď nemám ani smernicu, jednoducho overovateľ:

Problém, že validáciaFn, ktorú používam na zostavenie ovládacieho prvku formulára, musí vrátiť funkciu, ktorá môže získať len ovládací prvok formulára, znamená, že neexistuje žiadny vstup, vstup sa dá definovať v závere, ale nemožno ho zmeniť ...

Pokiaľ nejde o vstup premenlivého objektu ...

Urobme z neho meniteľný vstup:

Tu, ak zmením požadovanú hodnotu, môže metóda overovania fungovať s obnovenou hodnotou, ale napriek tomu ju nebude možné odvolať, iba ak sa dotknem samotného ovládacieho prvku v reaktívnych formátoch, nemôžem vykonať vyššie opísaný hack. , pretože som smernicu vôbec nepoužil.
Spôsob, ako som to zistil, je zaregistrovať zmeny vstupu a volať control.updateValueandValidity (), ktoré zrušujú validačný cyklus.

Toto je problém, ktorý som otvoril v Githube, ktorý popisuje tento problém.

Tiež je tu rovnaký kód v reaktívnej forme, veľmi zložitý, dúfam, že vyššie uvedený problém bude vyriešený a bude to jednoduchšie.