Réinitialiser un formulaire dans Angular 2 après la soumission

Question

Je suis conscient que Angular 2 manque actuellement d'un moyen de réinitialiser facilement un formulaire à un état initial. En cherchant, j'ai trouvé une solution comme celle ci-dessous qui réinitialise les champs du formulaire.

Il a été suggéré que je dois abandonner le groupe de contrôle et en créer un nouveau pour reconstruire le formulaire à l'état initial. J'ai du mal à trouver la meilleure façon de le faire. Je sais que je dois envelopper la construction du formulaire dans une fonction mais je rencontre des erreurs en le faisant dans le constructeur.

Quelle serait la meilleure façon de reconstruire le groupe de contrôle pour réinitialiser complètement le formulaire?

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);
        }
    }
}

Answer 1

>= RC.6

Support resetting forms and maintain a submitted state.

console.log(this.form.submitted);

this.form.reset()

or

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

importante mise à jour

Pour définir les contrôles du formulaire dans un état lors de sa création, comme les validateurs, certaines mesures supplémentaires sont nécessaires

Dans la partie vue du formulaire (html) ajoutez un *ngIf pour afficher ou masquer le formulaire

``

Du côté composant du formulaire (*.ts) faites ceci

  showForm:boolean = true;

  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

Voici un exemple plus détaillé:

export class CreateParkingComponent implements OnInit {
  createParkingForm: FormGroup ;
  showForm = true ;

  constructor(
    private formBuilder: FormBuilder,
    private parkingService: ParkingService,
    private snackBar: MatSnackBar) {

      this.prepareForm() ;
  }

  prepareForm() {
    this.createParkingForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
      'company': ['', Validators.minLength(5)],
      'city': ['', Validators.required],
      'address': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'latitude': [''],
      'longitude': [''],
      'phone': ['', Validators.compose([Validators.required, Validators.minLength(7)])],
      'pictureUrl': [''],
      // process the 3 input values of the maxCapacity'
      'pricingText': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'ceilingType': ['', Validators.required],
    });
  }

  ngOnInit() {
  }

  resetForm(form: FormGroup) {
    this.prepareForm();
  }

  createParkingSubmit() {
    // Cacher le formulaire pendant la soumission
    this.showForm = false ;

    // Dans ce cas, appeler le backend et réagir à la réponse de succès ou d'échec

    this.parkingService.create(p).subscribe(
      response => {
        console.log(response);
        this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
        setTimeout(() => {
          //réinitialiser le formulaire et le montrer à nouveau
          this.prepareForm();
            this.showForm = true;
          });
      }
      , error => {
        console.log(error);
        this.showForm = true ;
        this.snackBar.open('ERREUR: lors de la création du Parqueadero:' + error.message);
      }
      );
  }
}

Exemple Plunker

original <= RC.5 Déplacez simplement le code qui crée le formulaire dans une méthode et appelez-le à nouveau après avoir traité la soumission :

@Component({
  selector: 'form-component',
  template: `

       submit

    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();
  }
}

Exemple Plunker

``

Answer 2

Utilisez la méthode .resetForm() de NgForm plutôt que .reset() car c'est la méthode qui est officiellement documentée dans l'API publique de NgForm. (Réf [1])

La méthode .resetForm() va réinitialiser le FormGroup de NgForm et mettre son drapeau submit à false (Voir [2]).

Testé avec les versions @angular 2.4.8 et 4.0.0-rc3

Answer 3

Pour Angular 2 Final, nous avons maintenant une nouvelle API qui réinitialise proprement le formulaire :

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

Cette API réinitialise non seulement les valeurs du formulaire, mais définit également les états des champs du formulaire à ng-pristine et ng-untouched.

Answer 4

Lorsque j'étudiais le guide de base d'Angular sur les formulaires, et que j'ai atteint la section de réinitialisation des formulaires, j'ai été très surpris lorsque j'ai lu ce qui suit concernant la solution qu'ils donnent.

C'est une solution temporaire en attendant une fonction de réinitialisation appropriée des formulaires.

Je n'ai personnellement pas testé si la solution qu'ils ont fournie fonctionne (je suppose que oui), mais je pense que ce n'est pas propre, et qu'il doit exister une meilleure manière de gérer le problème.

Selon la documentation de FormGroup (qui est marquée comme stable), il existe déjà une méthode 'reset'.

J'ai essayé ce qui suit. Dans mon fichier template.html j'avais

    ...

Remarquez que dans l'élément form, j'ai initialisé une variable de référence de template 'registrationForm' et je l'ai initialisée avec la Directive ngForm, qui "gouverne le formulaire dans son ensemble". Cela m'a donné accès aux méthodes et attributs du FormGroup gouvernant, y compris la méthode reset().

Lier cet appel de méthode à l'événement ngSubmit comme montré ci-dessus réinitialise le formulaire (y compris les états pristines, sales, du modèle, etc.) après que la méthode register() soit terminée. Pour une démo, c'est ok, cependant ce n'est pas très utile pour les applications réelles.

Imaginez que la méthode register() effectue un appel vers le serveur. Nous voulons réinitialiser le formulaire lorsque nous savons que le serveur a répondu que tout va bien. Mettre à jour le code comme suit répond à ce scénario.

Dans mon fichier template.html :

    ...

Et dans mon fichier component.ts :

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Quelque part dans la fonction de résolution de l'appel asynchrone
   form.reset();
  }
}

Passer la référence 'registrationForm' à la méthode nous permettrait d'appeler la méthode reset au moment de l'exécution où nous le souhaitons.

J'espère que cela vous aidera d'une manière ou d'une autre. :)

Remarque : Cette approche est basée sur Angular 2.0.0-rc.5

Answer 5

Je ne sais pas si je suis sur la bonne voie, mais j'ai réussi à le faire fonctionner sur ng 2.4.8 avec les balises de formulaire/soumettre suivantes :

Semble fonctionner et réinitialise les champs du formulaire à "pristine" à nouveau.