Comment désactiver le bouton «Soumettre»?

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.)

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>

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

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

.html

<form [formGroup]="contactForm">

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

.ts

contactForm: FormGroup;

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.

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

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>

Peut-être que le code peut vous aider:

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

Cela a fonctionné pour moi.

.ts

newForm : FormGroup;

.html

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