Dall'archivio script > HTML5

Reactive form tipizzati con FormBuilder in Angular

di Morgan PizziniMorgan Pizzini, in HTML5, Angular,

Lo stessa struttura del form mostrata nelle pubblicazioni precedenti, tipizzazione inclusa, può essere ricreata utilizzando la classe FormBuilder. Nel caso in cui volessimo disabilitare tutti i campi nulli, la stesura risulterà anche più pulita, in quanto sarà l'istanza iniettata, NonNullableFormBuilder, a creare i controlli adatti senza la necessità di specificarne l'opzione.

import { NonNullableFormBuilder } from '@angular/forms';

@Component({})
export class AppComponent {
  // form default
  profileForm = this.fb.group({
    firstName: this.fb.nonNullable.control(""),
    lastName: '',
    address: this.fb.group({
      street: '',
      city: '',
    })
  });

  // form non nullabile
  profileForm1 = this.fb1.group({
    firstName: '',
    lastName: '',
    address: this.fb.group({
      street: '',
      city: '',
    })
  });

  constructor(private fb: FormBuilder,private fb1: NonNullableFormBuilder) {}
}

Nello snippet seguente troviamo un caso comune di definizione di un FormGroup, nel quale il form è definito all'interno dell'implementaizone dell'interfaccia OnInit. Benchè questa formulazione sia corretta, non permette all'intellisense di pre-analizzare il codice e fornire il corretto supporto allo sviluppatore. In questo caso qualsiasi valore venga richiesto sarà interpretato come tipo any.

export class AppComponent implements OnInit {

  profileForm:FormGroup;

  constructor(private fb: FormBuilder) {}
  
  ngOnInit(){
    profileForm = this.fb.group({
      firstName: ''
      lastName: ''
    });

    // any
    const formValues = profileForm.value;
    // any
    const name = profileForm.value.firstName;
    // any
    const lastname = profileForm.value.lastName;
  }
}

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
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