Comment désactiver le bouton «Soumettre»?

127

Comment désactiver le bouton «Soumettre» tant que le formulaire n'est pas valide?

Angular2 a-t-il un équivalent à ng-disabled qui peut être utilisé sur le bouton Soumettre? (ng-disabled ne fonctionne pas pour moi.)

forms angular

— Bonneville
source

1

uniquement lorsque vous utilisez la validation immédiate, par exemple lors de la saisie. Ne faites pas cela ... seulement avec une bonne réflexion ou avec une validation asynchrone, qui repose sur un backend par exemple.

— Sam Vloeberghs

243

Comme le montre cet exemple angulaire , il existe un moyen de désactiver un bouton jusqu'à ce que tout le formulaire soit valide:

<button type="submit" [disabled]="!ngForm.valid">Submit</button>

— Université angulaire
source

comment obtenir la valeur de la radio et de la case à cocher en utilisant formBuilder?

— Pardeep Jain

Le lien référencé a une ancienne syntaxe pour angular2 par exemple ng-form-modal. demandez-lui de mettre à jour merci.

— Pardeep Jain le

Vérifiez cet exemple, la syntaxe est à jour -> blog.jhades.org

— Angular University

1

comment valider un formulaire si vous désactivez le bouton d'envoi (sauf si vous le faites sur le flux mais je n'aime pas toujours ça)? S'il vous plaît être conscient des problèmes UX ici ..

— Sam Vloeberghs

6

[disabled] = "ngForm.invalid" vous pouvez également vérifier

— shaunak1111

47

dans Angular 2.xx , 4 , 5 ...

<form #loginForm="ngForm">
    <input type="text" required> 
    <button  type="submit"  [disabled]="loginForm.form.invalid">Submit</button>
</form>

— Bougarfaoui El houcine
source

7

.html

<form [formGroup]="contactForm">

<button [disabled]="contactForm.invalid"  (click)="onSubmit()">SEND</button>

.ts

contactForm: FormGroup;

— alvic
source

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.

— Nic3500

5

Voici un exemple de travail (vous devrez me faire confiance qu'il y a une méthode submit () sur le contrôleur - il imprime un objet, comme {user: 'abc'} si 'abc' est entré dans le champ de saisie):

<form #loginForm="ngForm" (ngSubmit)="submit(loginForm.value)">
    <input type="text" name="user" ngModel required>
    <button  type="submit"  [disabled]="loginForm.invalid">
        Submit
    </button>
</form>

Comme vous pouvez le voir:

n'utilisez pas loginForm.form, utilisez simplement loginForm
loginForm.invalid fonctionne aussi bien que! loginForm.valid
si vous voulez que submit () reçoive la (les) valeur (s) correcte (s), l'élément d'entrée doit avoir les attributs name et ngModel

De plus, c'est lorsque vous n'utilisez PAS le nouveau FormBuilder, ce que je recommande. Les choses sont très différentes lors de l'utilisation de FormBuilder.

— John Deighan
source

4

La validation de formulaire est très simple dans Angular 2

Voici un exemple,

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

 <div class="form-group">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname" 
   required [(ngModel)]="firstname" name="firstname">
 </div>

 <div class="form-group">
  <label for="middlename">Middle Name</label>
  <input type="text"  class="form-control" id="middlename" 
   [(ngModel)]="middlename" name="middlename">
 </div>

 <div class="form-group">
  <label for="lastname">Last Name</label>
  <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
 </div>

 <div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  
   minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$" 
   [(ngModel)] = "mobnumber" name="mobnumber">
 </div>

 <button type="submit" [disabled]="!myForm.form.valid">Submit</button>

</form>

Vérifiez ce plunker pour une démo

Plus d'informations

— Prashobh
source

2

Il est important que vous incluiez le mot-clé « obligatoire » dans chacune de vos balises d'entrée obligatoires pour que cela fonctionne.

 <form (ngSubmit)="login(loginForm.value)" #loginForm="ngForm">
    ...
    <input ngModel required name="username" id="userName" type="text" class="form-control" placeholder="User Name..." />
    <button type="submit" [disabled]="loginForm.invalid" class="btn btn-primary">Login</button>

— Emir Memic
source

0

Peut-être que le code peut vous aider:

<button type="submit" [attr.disabled]="!ngForm.valid ? true : null">Submit</button>

— Shivang Gupta
source

0

Cela a fonctionné pour moi.

.ts

newForm : FormGroup;

.html

<input type="button" [disabled]="newForm.invalid" />

— bereket gebredingle
source