web-dev-qa-db-fra.com

Angular2 Forms - Soumettre le bouton désactivé?

Le bouton Soumettre doit-il être désactivé jusqu'à ce qu'un formulaire soit valide? Meilleur entrainement?

Est-ce que angular2 a un équivalent à ng-disabled qui peut être utilisé sur le bouton Submit? (ng-disabled ne fonctionne pas pour moi.)

formsangular
103
Bonneville

voir ici un exemple , dans Angular 2 c'est un moyen de désactiver un bouton jusqu'à ce que tout le formulaire soit valide:

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

in Angular 2.x.x , 4 , 5 ...

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

Voici un exemple de travail (vous devrez me faire confiance qu'il existe une méthode submit () sur le contrôleur - il affiche 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 ou les valeurs correctes, l'élément input doit avoir les attributs name et ngModel

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

2
user1738579

La validation du 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 la démo

Plus d'informations

2
Prashobh

Il est important d'inclure le mot-clé " required " dans chacune de vos balises de saisie 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>
1
Emir Memic

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;
1
alvic

Cela a fonctionné pour moi.

.ts

newForm : FormGroup;

.html

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

Peut-être que le code ci-dessous peut aider:

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