Validazione nei controlli personalizzati
Fornire validatori dai controlli personalizzati
Validazione nei controlli personalizzati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Controlli con validazione integrata
Un controllo personalizzato può contenere la propria logica di validazione implementando l'interfaccia Validator e registrandosi con NG_VALIDATORS, così chi lo utilizza ottiene la validità automaticamente.
L'interfaccia Validator
Validator richiede un metodo validate che restituisca ValidationErrors (una mappa di errori) oppure null quando il valore è valido.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}Registrare NG_VALIDATORS
Aggiunga un secondo multi-provider per NG_VALIDATORS accanto a NG_VALUE_ACCESSOR, usando nuovamente 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 }
]Restituire mappe di errori
Le chiavi della mappa di errori diventano elementi di control.errors. Usi chiavi descrittive e payload facoltativi, così i template possono mostrare messaggi mirati.
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;
}Utilizzare gli errori
I template leggono control.errors proprio come fanno con i validator integrati, mostrando i messaggi quando il controllo non è valido ed è stato toccato.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Combinare i validator esterni
Vengono eseguiti e combinati sia i validator del controllo sia quelli passati dal consumer nel reactive form. Le regole del controllo si aggiungono a quelle del modulo, senza sostituirle.
stars: [0, [Validators.required]] // plus the control's own validate()Validazione dinamica
Se la validazione dipende da un input che cambia, chiami il callback di modifica registrato per informare Angular che deve eseguire nuovamente la validazione.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Validazione asincrona
Per i controlli lato server, implementi AsyncValidator con un metodo validate che restituisca un Observable o una Promise di errori, quindi si registri con NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Mantenerla focalizzata
Inserisca nel controllo solo la validazione intrinseca al controllo stesso (ad esempio, una valutazione deve essere maggiore di zero). Lasci le regole specifiche del business al modulo che utilizza il controllo, per mantenerlo riutilizzabile.
Testare la validazione
Testi unitariamente validate in modo diretto, passando un controllo fittizio con un valore e verificando la mappa di errori restituita o null.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Controllo personalizzato completo
Con value accessor, gestione degli stati disabilitato e toccato e validazione implementati, il componente è un controllo per moduli completo e riutilizzabile, indistinguibile dagli input nativi per chi lo utilizza.
Verifica rapida
Verifichi le Sue conoscenze sulla validazione.
Riepilogo
Ha aggiunto la validazione implementando Validator.validate, registrando NG_VALIDATORS, restituendo mappe di errori e supportando la rivalidazione dinamica tramite registerOnValidatorChange. Ha inoltre imparato a usare facoltativamente AsyncValidator con NG_ASYNC_VALIDATORS per ottenere un controllo personalizzato completamente integrato.
Domande Frequenti
La lezione «Validazione nei controlli personalizzati» è gratuita?
Sì — il testo completo di «Validazione nei controlli personalizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Validazione nei controlli personalizzati»?
Fornire validatori dai controlli personalizzati Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Validazione nei controlli personalizzati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L'interfaccia ControlValueAccessor
- Scrivere e registrare i valori
- Gestire gli stati disabilitato e toccato
- Validazione nei controlli personalizzati