Forme Angular2: convalide, ngControl, ngModel ecc

Lavorare su Forms angular2 beta. dopo un sacco di ricerca trovato nulla di utile. spero che qualcuno mi aiuti

Fondamentalmente sono un po ‘confuso su come usare form in angular2 in modo corretto (cioè usando ngControl, ngFormControl etc). ho creato un plnkr qui

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

ecco il mio codice .html: –

 
Name:
Password:
Btech Mtech
Math English Science

One Value two Value Three Value

e il codice .ts è qui: –

 CreateGroup: FormBuilder; constructor(fb: FormBuilder){ console.log('form called'); this.CreateGroup = fb.group({ 'name': new Control(), 'password': new Control() }) } addNewGroup(value) { console.log(value); document.getElementById("myForm").reset(); } getValue(value){ console.log(value); } 

non riesco a capire come ottenere valori come object dalla forma completa. il mio modulo include caselle di testo, caselle di controllo, radio e opzioni di selezione. ora ecco alcune delle mie domande.

Q1: – Come ottenere i valori della radio, casella di controllo, selezionare utilizzando modulo in angular2. (Non voglio chiamare il change hook per selezionare l’opzione come ho usato nel plnkr).

Q2: – come nel plnkr dopo aver inviato il controllo del modulo dati non è stato ripristinato. Il controllo della forma rimane presente ma la forma sembra resettata. così come resettare il controllo delle forms in angular2.

Q3: – qual è il metodo migliore per utilizzare la convalida nei moduli (se qualcuno ha un plnkr che mostri la convalida, per favore pubblicalo).

avevo letto questo articolo sui moduli ma ancora non riuscivo con le caselle di controllo radio e selezionare le opzioni.

The Ultimate Guide to Forms in Angular

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:

  

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:

Demo live per lo stesso qui

Demo di lavoro per forms angular2