Dall'archivio script > HTML5

Gestire i null nelle reactive form tipizzate di Angular

di Morgan PizziniMorgan Pizzini, in HTML5, Angular,

Il valore restituito dai form tipizzati non è mai un solo tipo, ma è sempre accompagnato da null in quanto è il default del controllo. Otterremo null solamente nel caso in cui richiediamo il valore senza aver eseguito una pre-assegnazione o successivamente ad un reset, effettuato tramite controllo.reset(). Per sovvertire questa logica possiamo altresì dichiarare il controllo come non nullo all'interno delle opzioni, e ricevere il valore di default in base al tipo.

const firstName = new FormControl('', { nonNullable: true });

// tipo <string>
const value = firstName.value;

// il valore sarà impostato a ''
firstName.reset();

Possiamo dunque costruire il primo form. In questo snippet useremo le Constructor API e cercheremo di recuperarne i valori.

const form = new FormGroup({
  firstName: new FormControl('', { nonNullable: true }),
  lastName: new FormControl('', { nonNullable: true }),
  address: new FormGroup({
    street: new FormControl('', { nonNullable: true }),
    city: new FormControl('', { nonNullable: true })
  })
});

// string/undefined
profileForm.value.firstName

// string/undefined
profileForm.value.lastName

// Partial<Address>/undefined
profileForm.value.address

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi