web-dev-qa-db-fra.com

Angularjs - formulaire simple à envoyer

Je suis en train d’apprendre avec AngularJs et j’aperçois qu’il n’existe pratiquement aucun exemple utile.

J'essaie de bien comprendre comment soumettre un formulaire avec les composants les plus standard et le transmettre à un fichier PHP.

Mon violon .

Est-ce que quelqu'un a de bons exemples de soumission de formulaires simples, non pollués, qui pourraient m'aider et probablement aider de nombreux autres débutants chez Angularjs ..

Quand je dis une forme propre, je fais référence à quelque chose comme ça ..

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
        Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>

        <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>

            <br/><br/>

        <input type="radio" ng-model="form.gender" value="female" />Female ...
        <input type="radio" ng-model="form.gender" value="male" />Male <br/>

            <br/><br/>

        <input type="checkbox" ng-model="form.member" value="5"/> Already a member

            <br/><br/>

        <input type="file" ng-model="form.file_profile" id="file_profile"><br/>
        <input type="file" ng-model="form.file_avatar" id="file_avatar">

            <br/><br/>

        <!-- <button ng-click="save()" >Save</button> -->
        <input type="submit" ngClick="Submit" >

    </form>

</div>

Mon code ng-app ...

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {

     var formData = {
        firstname: "default",
        emailaddress: "default",
        textareacontent: "default",
        gender: "default",
        member: false,
        file_profile: "default",
        file_avatar: "default"
    };

    $scope.save = function() {
        formData = $scope.form;
    };

    $scope.submitForm = function() {
        console.log("posting data....");
        formData = $scope.form;
        console.log(formData);
        //$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/});
    };

 });

Je suppose que les trois questions que j'ai à partir de maintenant sont ...

  1. Comment mon fichier php est-il censé interagir avec cela (comment obtenir la chaîne json dans un tableau dans un fichier php)?
  2. Comment pourrais-je soumettre la valeur d'une case à cocher lorsque la case à cocher est vraie?
  3. Je trouve beaucoup d'informations sur l'utilisation de jQuery avec Angular pour soumettre des images, je vois déjà un objet image dans cette soumission, comment puis-je récupérer ces données? Quelles sont les considérations à inclure avec les images?

Je suis prêt à prendre toute information claire et concise et à rassembler un bon exemple d'apprentissage pour tout le monde ...

Mon violon

javascriptphpformsangularjs
63
GRowing

J'ai fait pas mal de recherches et pour tenter de résoudre un problème différent, j'ai fini par trouver une bonne partie de la solution dans mon autre message ici:

Angularjs - Données de publication de formulaire non publiées?

La solution n'inclut pas actuellement le téléchargement d'images, mais je compte développer et créer un exemple clair et efficace. Si la mise à jour de ces articles est possible, je les tiendrai au courant jusqu'à ce qu'un exemple stable et facile à apprendre soit établi.

2
GRowing

AVERTISSEMENT Ceci est pour Angular 1.x

Si vous recherchez Angular (version 2 +, version 8 actuelle), essayez ceci réponse ou guide officiel .

RÉPONSE ORIGINALE

J'ai réécrit votre violon JS ici: http://jsfiddle.net/YGQT9/

<div ng-app="myApp">

    <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">

        First name:    <br/><input type="text" name="form.firstname">    
        <br/><br/>

        Email Address: <br/><input type="text" ng-model="form.emailaddress"> 
        <br/><br/>

        <textarea rows="3" cols="25">
          Describe your reason for submitting this form ... 
        </textarea> 
        <br/>

        <input type="radio" ng-model="form.gender" value="female" />Female
        <input type="radio" ng-model="form.gender" value="male" />Male 
        <br/><br/>

        <input type="checkbox" ng-model="form.member" value="true"/> Already a member
        <input type="checkbox" ng-model="form.member" value="false"/> Not a member
        <br/>

        <input type="file" ng-model="form.file_profile" id="file_profile">
        <br/>

        <input type="file" ng-model="form.file_avatar" id="file_avatar">
        <br/><br/>

        <input type="submit">
    </form>
</div>

Ici, j'utilise beaucoup de directives angular (ng-controller, ng-model, ng-submit) dans lesquelles vous utilisiez la soumission de formulaire HTML de base. Normalement, toutes les alternatives à "La angular manière" fonctionnent, mais la soumission du formulaire est interceptée et annulée par Angular pour vous permettre de manipuler les données avant la soumission.

MAIS le JSFiddle ne fonctionnera pas correctement car il n'autorise aucun type de message ajax/http post/get, vous devrez donc l'exécuter. localement.

Pour obtenir des conseils généraux sur angular soumission du formulaire, voir le exemples de livre de recettes

UPDATE Le livre de recettes est parti. Regardez plutôt le guide 1.x pour for soumission du formulaire

Le livre de recettes pour angular contient de nombreux exemples de code, ce qui vous aidera, car les documents ne sont pas très conviviaux.

Angularjs modifie tout votre processus de développement Web, n'essayez pas de faire les choses comme vous êtes habitué avec JQuery ou les html/js ordinaires, mais pour tout ce que vous faites, jetez un coup d'œil à l'exemple de code, car il y a presque toujours un angular alternative.

25
caffeinated.tech

Envoi de données à une page de service.

<form class="form-horizontal" role="form" ng-submit="submit_form()">
    <input type="text" name="user_id" ng-model = "formAdata.user_id">
    <input type="text" id="name" name="name" ng-model = "formAdata.name">
</form>

$scope.submit_form = function()
            {
                $http({
                        url: "http://localhost/services/test.php",
                        method: "POST",
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param($scope.formAdata)
                    }).success(function(data, status, headers, config) {
                        $scope.status = status;
                    }).error(function(data, status, headers, config) {
                        $scope.status = status;
                    });
            }
4
Akhilesh Kumar

Je pense que la raison pour laquelle AngularJS ne dit pas grand chose sur la soumission de formulaire, car elle dépend davantage de la "liaison de données bidirectionnelle". Dans le développement html traditionnel, vous aviez une liaison de données à sens unique, c’est-à-dire qu’une fois que DOM a rendu toutes les modifications que vous apportez à l’élément DOM ne sont pas reflétées dans JS Object, mais dans AngularJS, cela fonctionne dans les deux sens. Par conséquent, il n'est en fait pas nécessaire de soumettre un formulaire. J'ai fait une application de taille moyenne en utilisant AngularJS sans avoir besoin de soumettre de formulaire. Si vous souhaitez soumettre un formulaire, vous pouvez rédiger une directive qui enroule votre formulaire et qui gère les événements de clic sur les touches ENTRÉE et SUBMIT et appelle form.submit ().

Si vous souhaitez un exemple de code source pour une telle directive, veuillez me le faire savoir en le commentant. J'ai pensé que ce serait une simple directive que vous pouvez écrire vous-même.

1
D.S