web-dev-qa-db-fra.com

angular2 valider le formulaire en cliquant sur le bouton

Si je soumets un formulaire en utilisant button type="submit" les messages de validation du formulaire apparaissent et tout va bien. Cependant, si j'ai un bouton (ou un lien) avec (click)="myhandler()" alors les validations n'apparaissent pas.

Comment puis-je soit:

  • baliser l'élément comme nécessitant l'exécution de validateurs, ou
  • exécuter et afficher des messages de validation par programmation.

Remarque: il s'agit de validations simples comme celles requises sur les champs de saisie.

Exemple de code:

<form (ngSubmit)="save()">                       
  <input required type='text' [(ngModel)]="name">
  <!-- Shows validation messages but still calls save() -->
  <button (click)="save()">Click</button>  
  <!-- Only submits if valid and shows messages -->       
  <button type="submit">Submit</button>         
</form>
<!-- does not even show validation messages, just calls save -->
<button (click)="save()">Click 2</button>
angularangular2-forms
11
gatapia

Attention: cette approche concerne les formulaires réactifs.

J'ai utilisé la propriété markAsTouched() pour exécuter des validations sur un clic de bouton.

Supposons que le bouton suivant soit en dehors du formulaire:

<button type="button" (click)="validateForm()">Submit</button>

Maintenant, dans la méthode validateForm si le formulaire n'est pas valide, vous pouvez définir la propriété markAsTouched() pour chacun des contrôles de formulaire et angular affichera des messages de validation.

validateForm() {
    if (this.myformGroup.invalid) {
      this.myformGroup.get('firstName').markAsTouched();
      this.myformGroup.get('surname').markAsTouched();
      return;
    }
    // do something else
}

à condition que vous ayez configuré des messages de validation dans votre html comme

<mat-error *ngIf="myformGroup.get('firstName').hasError('required')">
  first name is required
</mat-error>

et vous avez requis la configuration de validation de champ dans votre générateur de groupe de formulaires comme

firstName: ['', Validators.required]
7
sainture

Le code ci-dessous vous aidera .. Testé avec Angular 4 Dernière version 4.2.4

<form method="post" #f="ngForm" name="form" novalidate="novalidate" class="form">
   <div class="row">
      <div class="form-group col-sm-12" [ngClass]="{'has-error':!listname.valid && (listname.dirty || listname.touched || f.submitted)}">
         <label for="listname">Name</label>
         <input id="listname" name="listname" type="text" [(ngModel)]="listData.title"
         required="true" placeholder="List Name" #listname="ngModel" class="form-control"/>
      </div>
   </div>
   <div class="row">
      <div class="form-group text-right col-md-12 visible-md visible-lg">
         <button type="button"  name="save"  (click)="f._submitted = true;saveAndPublish=false;saveList(f.valid)" class="btn btn-default">Save
         Save List
         </button>
         <button type="button"  name="saveandpublish" (click)="f._submitted = true;saveAndPublish=true;saveList(f.valid);" class="btn btn-primary">Save
         & Publish  List
         </button>
      </div>
   </div>
</form>

dans votre fichier .ts

saveList(isValid: boolean) {
    if (isValid) {
      console.log(this.listData)
    }

  }
3
KIRANJOSHI

Bouton avec le type soumettre le déclencheur du formulaire soumettre automatiquement, je suppose que vous devez déclencher le formulaire soumettre manuellement:

<form (ngSubmit)="save()" #form="ngForm">

<button (click)="form.onSubmit()">Click 2</button>

Pourquoi "ngForm"? La propriété exportAs d'une directive indique Angular comment lier une variable locale à la directive. Nous définissons le nom sur ngForm car la propriété exportAs de la directive NgControlName se trouve être "ngForm".

documentation

1
kemsky

Vous devez garder le bouton désactivé jusqu'à ce que le formulaire soit valide. Donc, dans votre cas, changez la balise d'ouverture de votre élément de formulaire pour créer une variable pour le formulaire:

<form (ngSubmit)="save()" #myForm="ngForm">

et désactiver le bouton lorsque le formulaire n'est pas valide

<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>

Faites-moi savoir si cela fonctionne. Comme le formulaire lui-même sera validé automatiquement et constamment dans tous les cas, vous n'avez pas besoin d'appeler pour qu'il soit fait.

1
MSwehli

placez les conditions dans la directive [caché] et changez la propriété soumise en true sur submit!

<div [hidden]="email.valid || (email.untouched && !submitted) || !submitted" class="alert callout">
    <span [hidden]="!email.hasError('required')">Required</span>
</div>

onSubmit(){
   this.submitted = true
}
1
Mauri Melo

Mettre votre click2 bouton dans la balise form. Ça va commencer à fonctionner!

<form (ngSubmit)="save()">                       
  <input required type='text' [(ngModel)]="name">
  <!-- Shows validation messages but still calls save() -->
  <button (click)="save()">Click</button>  
  <!-- Only submits if valid and shows messages -->       
  <button type="submit">Submit</button>     
  <!-- this will work now -->
  <button (click)="save()">Click 2</button>      
</form>
0
micronyks

Vérifier et désactiver par programmation à l'aide de la validation

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
  <div class="col-md-7">
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
  </div>
  Form Valid : {{CreateGroup.valid}} 
</form>
<br>
<div class='text-center'>
  <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>

exemple de travail http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview

0
Pardeep Jain