J'ai un formulaire qui ajoute des éléments dans mon tableau de liste de tâches. Cependant, si le champ d'entrée est vide, ma fonction ajoute une valeur vide à mon tableau.

Quelle est la meilleure façon de valider le formulaire?

        <form name="formaddtodo" ng-submit="todoList.addTodo()">
            <input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
                   placeholder="Voeg nieuwe todo toe">
            <input class="btn-primary" type="submit" value="voeg toe">
        </form>

Voici ma fonction

todoList.addTodo = function() {
                todoList.todos.push({text:todoList.todoText, done:false});
                todoList.todoText = '';
        };

Il n'y a pas encore de validation mais je suis curieux de savoir quelle est la meilleure façon de valider.

Merci d'avance!

0
Reinder Hijlkema 21 avril 2017 à 12:20

3 réponses

Meilleure réponse

Vous pouvez utiliser la directive ngRequired intégrée:

<input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
       placeholder="Voeg nieuwe todo toe" ng-required="required">

AngularJS fournit une implémentation de base pour les types d'entrée HTML5 les plus courants: (texte, nombre, url, e-mail, date, radio, case à cocher), ainsi que certaines directives de validation (obligatoire, modèle, minlength, maxlength, min, max).

https://docs.angularjs.org/guide/forms

0
Brother Woodrow 21 avril 2017 à 09:30

Prise en charge du module ngMessages pour l'affichage des messages à l'utilisateur pour la validation du formulaire.

NgMessages, les développeurs ont été contraints de s'appuyer sur des directives telles que ng-class et ng-show pour afficher ces erreurs.

Veuillez suivre ce lien. Cela pourrait être utile pour vous maintenant et dans le futur pour une utilisation avec AngulerJS.

0
Ahmed Ginani 21 avril 2017 à 09:40
<form name="formaddtodo" ng-submit="todoList.addTodo(formaddtodo.$valid)">
        <input type="text" ng-model="todoList.todoText" ng-minlength="1"  size="30"
               placeholder="Voeg nieuwe todo toe" required>
        <input class="btn-primary" type="submit" value="voeg toe">
    </form>


todoList.addTodo = function(isValid) {
           if(isValid) {
            todoList.todos.push({text:todoList.todoText, done:false});
            todoList.todoText = '';
           }
    };

Je pense que le code ci-dessus vous aidera à valider votre formulaire.

0
Aswathy Balan 21 avril 2017 à 09:27