Kutni: Kako implementirati uvjetnu prilagođenu provjeru valjanosti

Pretpostavimo da imamo obrazac za popunjavanje nekih osobnih podataka o obitelji: ime, datum rođenja, detalji partnera i detalji djece.

kao ovo:

I želimo da se zahtijeva ime djeteta, ali samo ako korisnik ima djecu kada nema djecu, tada bi trebao potvrditi potvrdni okvir: Ja nemam djecu

Također, želimo da se navede datum rođenja djeteta, samo ako je upisano ime djeteta.

Dakle, pišem potrebnu provjeru valjanostiAko dobiva logički unos, ako je unos istinit, tada kontrola mora imati vrijednost.

To je vrlo jednostavan validator:

A evo i mog obrasca:

Ali s ovom primjenom, ako ću ponovno potvrditi i poništiti potvrdni okvir "bez djece" bez dodirivanja kontrole, status provjere valjanosti neće se mijenjati.

Evo prekršenog ponašanja:

Kontrola dječjeg imena ostaje nevaljana, također ako sam potvrdio potvrdni okvir "bez djece", kutni ne zna za potrebu ponovne provjere.

Isto je i za datum rođenja djeteta, jer je u početku ime bilo prazno, tada je datum rođenja bio važeći, čak i ako popunim ime. i očekujem da će datum rođenja biti nevažeći sada.

status provjere valjanosti kontrole mijenja se samo ako se promijeni vrijednost upravljanja, a ne ako se promijeni ulaz za provjeru valjanosti.

Što će biti hack?

pogledajmo sučelje validatora:

Koja je svrha druge metode?

Ova metoda je krajnja točka za kutni registar za promjenu funkcije provjere valjanosti u implementaciju valjanja, a validator ga može nazvati kada želi povisiti provjeru valjanosti, na primjer, ako se promijeni ulaz za provjeru valjanosti.

Uvedimo ovo u naš validator:

Kad dođe do promjene unosa direktive, tražiIf, tada zovemo this._onChange () koji nas je registrirao. i tada kutni zna da ga treba ponovno provjeriti i status se mijenja.

Sada će raditi, pratite crvenu boju obruba koja označava nevaljano polje i pogledajte da će ona postati nevažeća i valjana i kada je ne dodirnem.

pogledajte primjer cijelog koda

Provjerite kutnu ugrađenost. i ustanovite da ih provode na gore opisan način. na primjer maxLength:

Reaktivni oblik

Za sada dobro, ali kako će to djelovati u reaktivnom obliku? kada nemam ni direktivu, samo validatorFn:

Ovdje je problem da validationFn, koji koristim za izgradnju kontrole obrasca, mora vratiti funkciju, koja može dobiti samo kontrolu obrasca, znači ne unos, ulaz se može definirati u zatvaranju, ali ne može se promijeniti ...

Osim ako je to izmjenjivi objekt unos ...

Učinimo to promjenjivim ulazom:

Ovdje, ako promijenim potrebnu vrijednost, ako metoda validacije može raditi s osvježenom vrijednošću, ali svejedno, neće se opozvati, samo kad dotaknem samu kontrolu, u reaktivnim oblicima, ne mogu izvršiti gore opisani hack , jer uopće nisam koristio direktivu.
Način na koji sam to učinio jest registriranje ulaznih promjena i poziv control.updateValueandValidity () koji opozivaju ciklus provjere valjanosti.

Vidi je problem koji sam otvorio u Githubu i koji opisuje ovaj problem.

Također, ovdje je isti kod u reaktivnom obliku, vrlo složen, nadam se da će gornje pitanje biti riješeno i da će biti lakše.