Reimpostazione di un modulo in Angular 2 dopo l’invio

Sono consapevole del fatto che attualmente Angular 2 non è in grado di ripristinare facilmente un modulo in uno stato originario. Girando ho trovato una soluzione come quella qui sotto che ripristina i campi del modulo.

È stato suggerito che ho bisogno di rilasciare il gruppo di controllo e crearne uno nuovo per ribuild il modulo come incontaminato. Sto avendo difficoltà a capire il modo migliore per farlo. So che ho bisogno di avvolgere il form building all’interno di una funzione, ma sto correndo in errori quando lo faccio all’interno del costruttore.

Quale sarebbe il modo migliore per ribuild il gruppo di controllo per reimpostare completamente il modulo?

class App { name: Control; username: Control; email: Control; form: ControlGroup; constructor(private builder: FormBuilder) { this.name = new Control('', Validators.required); this.email = new Control('', Validators.required); this.username = new Control('', Validators.required); this.form = builder.group({ name: this.name, email: this.email, username: this.username }); } onSubmit(value: any): void { // code that happens when form is submitted // then reset the form this.reset(); } reset() { for (let name in this.form.controls) { this.form.controls[name].updateValue(''); this.form.controls[name].setErrors(null); } } } 

> = RC.6

Supporta il ripristino dei moduli e mantiene uno stato submitted .

 console.log(this.form.submitted); 
 this.form.reset() 

o

 this.form = new FormGroup()...; 

aggiornare

Per ottenere alcune cose aggiornate che sono state inizializzate solo quando il modulo è stato creato, sono necessarie alcune misurazioni aggiuntive

 
{ this.reset() this.showForm = true; }); }

Esempio di Plunker

originale <= RC.5 Sposta semplicemente il codice che crea il modulo in un metodo e richiamalo nuovamente dopo aver gestito l’invio:

 @Component({ selector: 'form-component', template: ` 
name: {{name.value}}
email: {{email.value}}
username: {{username.value}}
` }) class FormComponent { name:Control; username:Control; email:Control; form:ControlGroup; constructor(private builder:FormBuilder) { this.createForm(); } createForm() { this.name = new Control('', Validators.required); this.email = new Control('', Validators.required); this.username = new Control('', Validators.required); this.form = this.builder.group({ name: this.name, email: this.email, username: this.username }); } onSubmit(value:any):void { // code that happens when form is submitted // then reset the form this.reset(); } reset() { this.createForm(); } }

Esempio di Plunker

Per Angular 2 Final, ora abbiamo una nuova API che ripristina in modo pulito il modulo:

 @Component({...}) class App { form: FormGroup; ... reset() { this.form.reset(); } } 

Questa API non solo ripristina i valori del modulo, ma imposta anche gli stati del campo del modulo su ng-pristine e ng-untouched .

Usa NgForm.resetForm() piuttosto che .reset() perché è il metodo che è ufficialmente documentato nella API pubblica di NgForm . (Rif [ 1 ])

 

Il metodo .resetForm() ripristinerà il NgForm di FormGroup e imposterà il flag di submit su false (vedi [ 2 ]).

Testato nelle versioni @angular 2.4.8 e 4.0.0-rc3

Quando stavo esaminando la guida di Angular Basics sui moduli e ho eseguito il reset della sezione delle forms, sono rimasto molto sorpreso quando ho letto quanto segue riguardo alla soluzione che danno.

Questa è una soluzione temporanea mentre attendiamo una corretta funzionalità di ripristino del modulo.

Personalmente non ho provato se la soluzione alternativa che hanno fornito funziona (presumo lo faccia), ma credo che non sia accurato, e che ci debba essere un modo migliore per affrontare il problema.

Secondo l’ API FormGroup (che è contrassegnata come stabile) esiste già un metodo ‘reset’.

Ho provato il seguente. Nel mio file template.html che avevo

 
...

Si noti che nell’elemento del modulo ho inizializzato una variabile di riferimento del modello ‘registrationForm’ e l’ho inizializzata nella direttiva ngForm , che “governa il modulo nel suo complesso”. Questo mi ha dato l’accesso ai metodi e agli attributi del FormGroup che governa, incluso il metodo reset ().

Il binding di questa chiamata di metodo all’evento ngSubmit come mostrato sopra ripristina il modulo (compresi pristine, dirty, stati del modello ecc.) Dopo che il metodo register () è stato completato. Per una demo questo è ok, tuttavia non è molto utile per le applicazioni del mondo reale.

Immagina che il metodo register () effettui una chiamata al server. Vogliamo ripristinare il modulo quando sappiamo che il server ha risposto che tutto è OK. Aggiornare il codice ai seguenti articoli per questo scenario.

Nel mio file template.html:

 
...

E nel mio file component.ts:

 @Component({ ... }) export class RegistrationComponent { register(form: FormGroup) { ... // Somewhere within the asynchronous call resolve function form.reset(); } } 

Passare il riferimento “registrationForm” al metodo ci consentirebbe di chiamare il metodo di reset nel punto di esecuzione che vogliamo.

Spero che questo ti aiuti in alcun modo. 🙂

Nota : questo approccio è basato su Angular 2.0.0-rc.5

Non so se sono sulla strada giusta, ma ho capito che funziona su ng 2.4.8 con i seguenti tag form / submit:

 

Sembra fare il trucco e imposta i campi del modulo per “pristine” di nuovo.

Se si chiama solo la funzione reset() , i controlli del modulo non verranno impostati sullo stato pristine. i documenti android.io hanno una soluzione per questo problema.

component.ts

  active = true; resetForm() { this.form.reset(); this.active = false; setTimeout(() => this.active = true, 0); } 

component.html

 

Uso le forms reattive nell’angular 4 e questo approccio funziona per me:

  this.profileEditForm.reset(this.profileEditForm.value); 

vedere reimpostare i flag del modulo nel documento Fondamentali

Ho usato in modo simile la risposta di Günter Zöchbauer, ed è stato perfetto per me, spostare la creazione del modulo in una funzione e chiamarla da ngOnInit ().

Per esempio, è così che l’ho realizzato, compresa l’inizializzazione dei campi:

 ngOnInit() { // initializing the form model here this.createForm(); } createForm() { let EMAIL_REGEXP = /^[^@][email protected]([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too this.userForm = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(3)]), city: new FormControl(''), email: new FormControl(null, Validators.pattern(EMAIL_REGEXP)) }); this.initializeFormValues(); } initializeFormValues() { const people = { name: '', city: 'Rio de Janeiro', // Only for demonstration email: '' }; (this.userForm).setValue(people, { onlySelf: true }); } resetForm() { this.createForm(); this.submitted = false; } 

Ho aggiunto un pulsante al modulo per un reset intelligente (con l’inizializzazione dei campi):

Nel file HTML (o modello in linea):

  

Dopo aver caricato il modulo alla prima volta o dopo aver fatto clic sul pulsante di ripristino, abbiamo il seguente stato:

 FORM pristine: true FORM valid: false (because I have required a field) FORM submitted: false Name pristine: true City pristine: true Email pristine: true 

E tutte le inizializzazioni di campo che un semplice form.reset () non fa per noi! 🙂

Si prega di utilizzare il seguente formato, funziona perfettamente per me .. ho controllato molti modi, ma questo funziona perfettamente.

....

se qualcuno vuole eliminare solo un particolare controllo di forma si può usare

 formSubmit(){ this.formName.patchValue({ formControlName:'' //or if one wants to change formControl to a different value on submit formControlName:'form value after submission' }); }