Walidacja w niestandardowych kontrolkach
Udostępniać walidatory z niestandardowych kontrolek
Walidacja w niestandardowych kontrolkach to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Kontrolki z własną walidacją
Niestandardowa kontrolka może zawierać własną logikę walidacji, implementując interfejs Validator i rejestrując się za pomocą NG_VALIDATORS, dzięki czemu korzystający z niej kod automatycznie otrzymuje informacje o poprawności.
Interfejs Validator
Interfejs Validator wymaga metody validate, która zwraca ValidationErrors (mapę błędów) albo null, gdy wartość jest poprawna.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}Rejestrowanie NG_VALIDATORS
Należy dodać drugi dostawca wielokrotny dla NG_VALIDATORS obok NG_VALUE_ACCESSOR, ponownie używając forwardRef.
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]Zwracanie map błędów
Klucze mapy błędów stają się wpisami w control.errors. Należy używać opisowych kluczy i opcjonalnych danych, aby szablony mogły wyświetlać odpowiednio dopasowane komunikaty.
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}Korzystanie z błędów
Szablony odczytują control.errors tak samo jak w przypadku wbudowanych walidatorów, wyświetlając komunikaty, gdy kontrolka jest niepoprawna i ma stan touched.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Łączenie z zewnętrznymi walidatorami
Walidatory kontrolki oraz walidatory przekazane przez korzystający z niej kod (w formularzu reaktywnym) są uruchamiane i scalane. Reguły kontrolki są dodawane do reguł formularza, a nie je zastępują.
stars: [0, [Validators.required]] // plus the control's own validate()Dynamiczna walidacja
Jeśli walidacja zależy od zmieniającego się wejścia, należy wywołać zarejestrowane wywołanie zwrotne zmian, aby poinformować Angulara o konieczności ponownego uruchomienia walidacji.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Walidacja asynchroniczna
W przypadku sprawdzania danych na serwerze należy zaimplementować AsyncValidator z metodą validate zwracającą Observable lub Promise z błędami, a następnie zarejestrować go za pomocą NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Zachowanie właściwego zakresu
Wewnątrz kontrolki należy umieszczać wyłącznie walidację nieodłącznie z nią związaną (na przykład ocena musi być większa od zera). Reguły specyficzne dla logiki biznesowej należy pozostawić formularzowi, w którym kontrolka jest używana, aby zachować możliwość ponownego użycia.
Testowanie walidacji
Należy bezpośrednio testować jednostkowo metodę validate, przekazując fikcyjną kontrolkę z wartością i sprawdzając, czy zwrócona została mapa błędów albo null.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Kompletna niestandardowa kontrolka
Po zaimplementowaniu dostawcy wartości, obsługi wyłączenia, stanu touched i walidacji komponent jest kompletną, wielokrotnego użytku kontrolką formularza, która dla korzystającego z niej kodu nie różni się od natywnych pól wejściowych.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat walidacji.
Podsumowanie
Dodano walidację przez implementację Validator.validate, zarejestrowanie NG_VALIDATORS, zwracanie map błędów, obsługę dynamicznego ponownego uruchamiania walidacji za pomocą registerOnValidatorChange oraz opcjonalnie AsyncValidator z NG_ASYNC_VALIDATORS, tworząc w pełni zintegrowaną niestandardową kontrolkę.
Często zadawane pytania
Czy lekcja „Walidacja w niestandardowych kontrolkach” jest bezpłatna?
Tak — pełny tekst „Walidacja w niestandardowych kontrolkach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Walidacja w niestandardowych kontrolkach”?
Udostępniać walidatory z niestandardowych kontrolek Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Walidacja w niestandardowych kontrolkach”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Interfejs ControlValueAccessor
- Zapisywanie i rejestrowanie wartości
- Obsługa stanów disabled i touched
- Walidacja w niestandardowych kontrolkach