Mon premier formulaire avec Angular

Le formulaire est l’interface web pour entrer des données, Angular doit bien nous aider à rendre cette saisie plus agréable ?

Suite à mon dernier post, je me crée une nouvelle page « /angular/input » dans mon contrôleur :

public function getInput()
{
	return View::make('angular.input');
}

et donc une nouvelle vue /app/views/input.blade.php;
Un formulaire très simple avec une zone de saisie « mtest » qui va alimenter une liste de données.

@section('content')

    <div ng-controller="monControl">
         <form action="#" name="monForm">
        <input ng-model="mtest" ng-required="true" name="mtest" value="" placeholder="...">
            <button ng-click="ajout()">Ajouter a la liste</button>
        </form>

        <ul>
            <li ng-repeat="item in items | filter:filtrer">{{$Ao}}item{{$Ac}}</li>
        </ul>
        filtre de visualisation de cette liste : <input name="filtre" value="ab" ng-model="filtrer"> 

    </div>
@stop

L’input a l’attribut obligatoire « ng-model »; cet identifiant va être utilisé dans la partie Javascript et non les attributs « name » ou « id ».

@section('scripts')
var tableau =['a','b'];

function monControl($scope){
    $scope.items=tableau;

    $scope.ajout=function(){
        if ($scope.mtest!=''){ 
            $scope.items.push($scope.mtest) ;
            $scope.mtest='';
        }
    }
}
@stop

Par l’action « ajout », la valeur de l’input est récupérée dans le scope et ajoutée à la liste. Il faut noter que la valeur ajoutée dans la liste n’est pas obligatoirement affichée; car ng-repeat a un filtre sur la valeur d’un autre input « filtrer ».


Il est possible de contrôler à la saisie si la valeur entrée est valide. Pour cela nous avons les attributs angular : ng-required, ng-minlength, bg-maxlength et ng-pattern; mêmes fonctionnalités que les attributs html5.

<input name="mtest" value="" placeholder="..." ng-model="mtest"
               ng-required="true" ng-minlength="4" ng-pattern="/[0-9]/">
            <span ng-show="monForm.mtest.$error.required" class="error"> obligatoire! </span>
            <span ng-show="monForm.mtest.$error.minlength" class="error"> trop petit 4 char au minimum!</span>
<br>
ce formulaire est valide ? {{$Ao}}myForm.$valid{{$Ac}}

Nous ajoutons 2 balises span qui ne seront affichées (ng-show) que si nous avons une erreur de validation de la donnée en cours de saisie « mon_Formulaire.mon_Input.$error ». Nous avons même une variable « mon_formulaire.$valid » pour pouvoir afficher un bouton de validation, d’envoi par exemple.

 

Share Button

Vous devriez aimer...