Angular prevede già alcuni validator di base per le reactive form: required, min, max e così via. Questi validatori coprono le esigenze di base, ma non possono ovviamente coprirle tutte. Per coprire esigenze particolari della nostra applicazione, dobbiamo creare dei validatori custom.
Creare un validatore custom per le reactive form in Angular è tutt'altro che complicato. Si tratta di definire una funzione che a sua volta torna una funzione. Vediamo prima il codice.
export class CustomValidators { static stringNotEqual(value: string): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (isEmptyInputValue(control.value) || isEmptyInputValue(value)) { return null; } return value === control.value ? { 'notEqual': { 'value': value } } : null; }; } }
La funzione stringNotEqual verifica che il valore presente nel controllo della form sia diverso da un valore passato in input. La funzione accetta un parametro che rappresenta il valore che vogliamo confrontare con quello inserito dall'utente. Questa funzione torna un'altra funzione che prende in input il controllo di input. Questa seconda funzione esegue il controllo di validità e se non passa restituisce un oggetto che ha una proprietà che rappresenta il codice di errore (not-equal nel nostro caso) e eventuali valori che vogliamo restituire (possono essere utili per costruire il messaggio di errore). In caso il controllo di validità passi, allora torniamo null.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
.NET Aspire per applicazioni distribuite
Gestire gli accessi con Token su Azure Container Registry
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Migliorare l'organizzazione delle risorse con Azure Policy
Creare una libreria CSS universale: Nav menu
Configurare automaticamente un webhook in Azure DevOps
Eliminare record doppi in Sql Server
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Combinare Container Queries e Media Queries
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Gestire progetti NPM in .NET Aspire
Ridurre il reflow ottimizzando il CSS
I più letti di oggi
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi