Angular 2 Typescript: TypeError: this.validator non è una funzione

Question

Sto costruendo un modulo con ControlGroup e sto caricando un oggetto di classe in esso. Comunque sto correndo nell'errore menzionato nel titolo metà del tempo. Alcune forme si caricano e altre no.

Ho un file di classe in questo modo:

export class User { 
    id: number; 
    email: string; 
    sign_in_count: number; 
    created_at: string; 
    first_name: string; 
    last_name: string; 
    birth_date: Date; 
    news_letter: boolean; 
    fb_id: string; 
    gender: boolean; 
    phone: string; 
    picture: any; 
} 

Nel mio UserDetailComponent ho caricare la classe nel controllo in questo modo:

export class UserDetailComponent implements OnInit { 
    user: User; 
    userDetailForm: ControlGroup; 

    constructor(
     private form: FormBuilder, 
     private _userService: UserService, 
     private _router: Router, 
     private params: RouteSegment 
    ) { } 
    ngOnInit() { 
     this.user = this._userService.getUser(); 
     if (this.user === undefined) { 
      this._userService.getSingleUser(this.params.getParam('id')) 
       .subscribe(data => (this.user = data, this.setForm())); 
     } else { 
      this.setForm(); 
     } 
    } 

    setForm() { 
     this.userDetailForm = this.form.group(this.user); 
    } 
} 

Su quest'ultimo linea ottengo l'errore di cui il stacktrace è il seguente:

browser_adapter.ts:78 TypeError: this.validator is not a function 
    at Control.AbstractControl._runValidator (model.ts:146) 
    at Control.AbstractControl.updateValueAndValidity (model.ts:128) 
    at new Control (model.ts:282) 
    at FormBuilder.control (form_builder.ts:32) 
    at FormBuilder._createControl (form_builder.ts:66) 
    at eval (form_builder.ts:50) 
    at Function.StringMapWrapper.forEach (collection.ts:132) 
    at FormBuilder._reduceControls (form_builder.ts:49) 
    at FormBuilder.group (form_builder.ts:19) 
    at UserDetailComponent.setForm (user-detail.component.ts:95) 

Answer 1

Creare il modulo nel costruttore. Quando Angular non trova il modulo al primo tentativo di risolvere i binding, allora non funziona.

this.userDetailForm ha solo bisogno di essere inizializzato con un gruppo vuoto o con alcuni controlli statici. Quindi, quando i dati arrivano dal server, aggiornare il gruppo aggiungendo/rimuovendo i controlli e aggiornando i valori.

Answer 2

Ho avuto questo errore quando stavo legando un array di valori nel generatore di moduli nel modo sbagliato.

Quello che ho fatto:

fb.group({items: [1, 2, 3, 4]}) 

come dovrebbe essere:

fb.group({items: [[1, 2, 3, 4]]}) 

Bisogna avvolgere tutto in un array, altrimenti angolare pensa che [1, 2, 3, 4] è un controllo modulo definizione piuttosto che un valore di controllo modulo .