désactiver continuer/suivant jquery étapes avec angulaire 2

Question

Je dois désactiver le bouton continuer de jquery étapes jusqu'à ce que je rencontre la condition exacte .. ex: sans remplir le nom d'utilisateur l'utilisateur ne peut pas permettre de continuer (il suffit de le désactiver).

Dans un contexte angulaire, comment puis-je faire cela?

merci à l'avance

Answer 1

Vous devriez jeter un oeil à template driven forms. Il y a des concepts clés à maîtriser quand vous faites le développement Angular 2 et c'est l'un d'entre eux. Donc, en fonction de cela, si vous deviez créer un élément de formulaire qui encapsule tous les champs et ajouter l'attribut required aux éléments qui doivent être remplis (ex : userName), le bouton sera désactivé si l'un des champs obligatoires n'est pas rempli.

entrée Exemple avec required attribut:

<input type="text" class="form-control" id="userName" 
      required 
      [(ngModel)]="yourModel.yourProperty" name="userName" 
      #userName ="ngModel"> 

bouton exemple à l'intérieur de votre formulaire:

<button type="submit" class="btn btn-success">Submit</button> 

Sinon, si vous ne voulez pas utiliser les formulaires et vous êtes pressé en ce moment , vous pouvez lier l'attribut disabled du bouton et exécuter une méthode qui renvoie un booléen après avoir vérifié si tous les champs obligatoires sont présents ou non.

<button [disabled]="!isMissingRequiredFields()">Continue</button> 

Et vous devez utiliser ngModel fixations pour tous les champs d'entrée qui sont nécessaires et que vous vérifierez dans la méthode isMissingRequiredFields() de sorte que vous ne finissent par faire quoi que ce soit funky comme l'accès aux éléments DOM à l'intérieur de vos ts composants fichier et obtenir leur innerText etc