Controllo del modulo vincolante a un modello di dominio

Inizializza il modello di dominio all’interno del tuo componente:

 constructor(){ this.student = new Student(); } 

Utilizzare ngModel per associare i controlli del modulo a un modello di dominio con associazione modello a due vie.

 Name:  Password:  

Quando si fa clic sul pulsante, passare il modello di dominio come argomento:

 Create 

Implementare il metodo addNewGroup . Per ripristinare il modulo, aggiornare il modello di dominio con un nuovo modello:

 addNewGroup(student:Student) { alert('added ' + student.name); this.student = new Student(); } 

Demo Plnkr

Aggiunta di validatori al modulo

Per aggiungere la convalida del modulo, aggiungi ngFormModel del modulo e aggiungi i decoratori ngControl a ciascun elemento di input ( ngControl è lo zucchero sintattico per [ngFormControl]="studentForm.controls['name']" ):

Il ngFormModel mapping a una proprietà ControlGroup del componente. Inizializza ControlGroup con un object di configurazione i cui nomi di proprietà corrispondono ai valori degli attributi ngControl :

 constructor(fb: FormBuilder){ this.student = new Student(); this.studentForm = fb.group({ 'name': new Control(this.student.name, Validators.required), 'password': new Control(this.student.password, Validators.required) }); } 

Nell’esempio sopra, viene utilizzato il validatore required incorporato per indicare che nome e password sono campi obbligatori. È quindi ansible verificare se l’intero modulo è valido utilizzando la proprietà valid nel modello di modulo:

 addNewGroup(student:Student) { if (this.studentForm.valid) { alert('added ' + student.name); this.student = new Student(); } else { alert('form is not valid!'); } } 

Demo Plnkr

Visualizzazione dei messaggi di convalida

Se si desidera associare i messaggi di convalida nella vista, è ansible esportare il controllo come variabile di modello locale e accedere alle sue proprietà di convalida: valido, sporco, in sospeso, incontaminato e l’object errori.

   Required 

Demo Plnkr

Se si desidera creare un proprio validatore personalizzato, creare un metodo che restituisca un object di convalida le cui proprietà boolean corrispondano a errori di convalida. Ad esempio, puoi creare un validatore che assicuri che la prima lettera di una password debba essere numerica:

 interface ValidationResult { [key:string]:boolean; } class PasswordValidator { static startsWithNumber(control: Control): ValidationResult { if ( control.value && control.value.length > 0){ if (isNaN(control.value[0])) return { 'startsWithNumber': true }; } return null; } } 

Componi i validatori insieme in un unico validatore e passalo al costruttore di Control utilizzando l’object Validators.compose incorporato:

 this.studentForm = fb.group({ 'name': new Control(this.student.name, Validators.required), 'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])), }); 

Se si dispone di più validatori sullo stesso Control , utilizzare l’object errors per distinguerli:

  Required Must start with number 

Demo Plnkr

Associazione a elenchi di pulsanti radio

In Angular2 non è ancora disponibile il supporto integrato per associare gli elenchi dei pulsanti di opzione. Controlla questo post per scoprire come fare questo:

Angular2 – Radio Button Binding

UPADTED – ANGULAR2 RC4 FORMS

TL; DR;

Dopo il rilascio di Forme RC angular2 sono state apportate molte modifiche nelle forms angolari2. ci sono alcuni di loro sono importanti cambiamenti di rottura alcuni di loro sono trascurabili, qui ci sono alcuni punti chiave per l’utilizzo di forms angular2.

Fondamentalmente ci sono due modi per build moduli in Angular 2, vale a dire template-driven e model-driven. struttura di base per l’utilizzo di moduli sono i seguenti: –

• eseguire npm install @angular/forms --save

• configurare il metodo bootstrap per la tua app come segue:

   bootstrap(AppComponent, [ disableDeprecatedForms(), // disable deprecated forms provideForms(), // enable new forms module ]); 

• utilizzare REACTIVE_FORM_DIRECTIVES alle direttive componente per utilizzare la funzionalità dei moduli.

• creare una variabile Form di tipo FormGroup
• Utilizzare i Validators per scopi di convalida.

a parte questo FormBuilder non è obbligatorio per build un modulo basato sul modello, ma semplifica la syntax. ci sono tre syntax / metodo di base forniti dal formbuilder:

• gruppo : costruisci un nuovo gruppo di moduli.
• array : costruisce un nuovo array di moduli.
• controllo : costruisci un nuovo controllo di forma.

Questi sono i passaggi fondamentali per utilizzare i moduli in angular2 RC.

Risorse utili per le forms angular2:

• https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol

• https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Demo live per lo stesso qui

Demo di lavoro per forms angular2