2016-07-05 65 views
12

Sto sperimentando forme in Angular 2 RC4. E 'tutto funzionava bene, ma quando inizio l'applicazione della console browser mi dà questo messaggio:Forme in Angular 2 RC4

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. 

La parte rilevante della mia componente si presenta così:

import { 
    FORM_DIRECTIVES, 
    REACTIVE_FORM_DIRECTIVES, 
    FormBuilder, 
    FormGroup 
} from '@angular/forms'; 
import {Observable} from "rxjs/Rx"; 

@Component 
({ 
    selector: "hh-topbar", 
    moduleId: module.id, 
    templateUrl: "topBar.component.html", 
    directives: [HHPagerComponent, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES] 
}) 

export class HHTopBarComponent implements OnChanges, OnInit 
{ 
    ... 
    private filterForm: FormGroup; 
    private title$: Observable<string>; 

    constructor(private formBuilder: FormBuilder) 
    { 
    } 

    public ngOnInit(): any 
    { 
     this.filterForm = this.formBuilder.group 
     ({ 
      "title": [this.info.filters.searchFileName] 
     }); 

     this.title$ = this.filterForm.controls["title"].valueChanges; 
     this.title$.subscribe(val => 
     { 
      this.info.filters.searchFileName = val; 
      this.filterChanged.emit(this.info.filters); 
     }); 
    } 
} 

E la parte rilevante del mio modello assomiglia a questo:

<form [formGroup]="filterForm"> 
    <div> 
     <label for="title">Title</label> 
     <input [formControl]="filterForm.controls['title']" id="title" /> 
    </div> 
</form> 

qualcuno qui sa che cosa è le nuove forme del modulo l'avviso sta parlando e quali direttive cambierà e per che cosa?

+0

cosa è l'uso di 'REACTIVE_FORM_DIRECTIVES' qui? –

risposta

16

È necessario disattivare in modo esplicito il supporto modulo deprecato quando bootstrap l'applicazione:

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

bootstrap(AppComponent, [ 
    disableDeprecatedForms() 
    provideForms() 
]); 

Mentre FormBuilder non è deprecato, è possibile utilizzare direttamente la classe FormGroup invece:

this.filterForm = new FormGroup({ 
    title: new FormControl('', Validators.required) 
}); 
+0

Questo ha fatto il trucco e grazie per il suggerimento sull'utilizzo diretto della classe FormGroup. Molto utile. Per quanto ne sai, le direttive che sto utilizzando formeranno nella prima versione effettiva? – hholtij

+0

Prego! Usate le giuste direttive del modulo ;-) Se è la vostra domanda ... –

+0

qual è l'uso di "REACTIVE_FORM_DIRECTIVES" qui @ThierryTemplier? –