web-dev-qa-db-fra.com

Validation de formulaire de déclenchement angulaire 2 sur Soumettre

J'ai créé un formulaire avec angular 2 et ajouté quelques validateurs custome. Maintenant, je veux déclencher la validation du formulaire si l'utilisateur clique sur le bouton Soumettre. Dans les exemples que j'ai trouvés jusqu'à présent, le bouton d'envoi est désactivé tant que le formulaire est invalide mais je veux que le bouton d'envoi soit toujours activé et lorsque l'utilisateur clique sur le formulaire, le formulaire doit être validé. Est-ce que quelqu'un sait comment je peux faire ce travail et quelle méthode TypeScript je devrais utiliser? J'ai trouvé la méthode updateValueAndValidity mais elle ne semble pas fonctionner avec cette méthode.

validationangulartypescriptangular2-forms
14
Snake

Si vous utilisez un formulaire basé sur des modèles, vous pouvez utiliser cette syntaxe:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean){
   if(isValid){
       //do something
   }
}

vous pouvez aussi ajouter des erreurs sur submit comme ceci:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>
12
dev_in_progress

La validation doit être exécutée chaque fois que vous modifiez le modèle. Mais peut-être vous ne pouvez pas voir le message d'erreur parce que le FormControl est intact? Voici ma solution qui fonctionne bien. 

Je l'ai fait avec les étapes faciles suivantes: 

  1. Implémenter un FormComponent (sélecteur "form") qui injecte le formGroupDirective (s'abonner à l'événement submit et définir soumis comme true)

 @Component ({
 Sélecteur: 'formulaire', 
 TemplateUrl: 'formulaire.component.html', 
 StyleUrls: ['formulaire.component.scss'] 
}) 
 La classe d'exportation FormComponent implémente OnInit {
 @Output () submit = new EventEmitter (); 

 constructeur (@Optional () private formGroupDirective: FormGroupDirective) {
 } 

 ngOnInit () {
 if (this.formGroupDirective) {
 this.formGroupDirective.ngSubmit.subscribe (() => {
 this.formGroupDirective.form ['soumis'] = true; 
}); 
 } 
 } 

 }

Les lignes importantes sont dans ngOnInit

  1. Vérifier le formulaire soumis pour montrer l'erreur

    * ngIf = "control? .hasError ('required') && (control? .touched || form? .submitted)"

J'espère que cela pourra aider

1
DaniS

(Forme réactive)

Si j'avais un problème, ma solution est la suivante: 

-- Modèle

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button>

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup">
...
</form>

- classe

@ViewChild('f') f: FormGroupDirective;

submit(formDirective: FormGroupDirective) {
  console.log('valid', formDirective.valid);
  console.log('value', formDirective.value);
}

C’est la solution que j’utilise pour soumettre le formulaire avec un bouton qui n’est pas sous la forme.

Merci

0
Yuriy Yakovenko