angularjs - Angular Form Validation and Sending HTML Template with Form -


here plunkr demonstrating issue.

i apologize if seems should 2 separate questions, seems me issues related.

i have form requires name , email address, , when submitted, sends those, in addition html email template, end. here abbreviated version of form:

<form novalidate id="send-email" data-ng-controller="sendlistcontroller" ng-submit="sendemail()">     <div class="form-group">         <!-- hidden input populated compiled html controller -->         <input type="hidden" id="htmltemplate" name="htmltemplate" ng-value="form.compiledhtml" data-ng-model="form.compiledhtml">     </div>     <div class="form-group" ng-class="{'has-error':form.name.$invalid && form.name.$dirty}">         <input type="text" class="form-control" id="name" name="name" placeholder="full name" data-ng-model="form.name" required>         <span class="help-block has-error" ng-if="form.name.$dirty">this field required</span>     </div>     <div class="form-group">         <button type="submit" ng-disabled="loading">             <span ng-show="!loading">                 <span class="glyphicon glyphicon-send"></span> mail it!             </span>             <span ng-show="loading">                 <span class="fa fa-spinner fa-spin" ng-show="loading" ></span> sending . . .                 </span>         </button>     </div> </form>

the loading , !loading functionality working, , hidden inputs populated properly, , communication end fine. error classes being added elements, form errors never shown , form submits when required inputs have classes ng-dirty , ng-invalid.

here controller (and, way, don't looking @ html markup in js, if has better ideas, please let me know):

app.controller('sendlistcontroller', ['$scope', 'list', '$http', '$compile', '$timeout', 'toastr', function ($scope, list, $http, $compile, $timeout, toastr) {     $scope.form = {};     $scope.loading = false;      var container = angular.element('<div></div>');      // list service     $scope.list = list;      container.html(         '<h1>{{list.listtitle}}</h1>' +         '<ul>' +             '<li data-ng-repeat="item in list.show()">' +                 '<span> {{item.displayname}} &mdash; </span>' +                 '<span> {{item.description}} &mdash; </span>' +                 '<span> {{item.count}} {{item.counttext}} &mdash; </span>' +                 '<span> ${{item.price}} </span>' +             '</li>' +         '</ul>'     );      $compile(container)($scope);      $timeout(function () {         $scope.form.compiledhtml = container.html();         // htmltoplaintext() private method definition have not         // included here. trust works.         $scope.form.plaintext = htmltoplaintext(container.html());     });      $scope.sendemail = function()     {         $scope.loading = true;         $http.post('/mail-it', $scope.form)          .success(function (response)         {             if (response.successmessage)             {                 toastr.success('success', response.successmessage);             }             else             {                 toastr.warning(response.errormessage);             }              $scope.form = {};             $scope.loading = false;         })         .error(function (response)         {             toastr.error('error', 'uh-oh! went wrong. try again!');             $scope.loading = false;         });     }

again, working (which, know, doesn't mean it's or right), except form validation. somehow related injecting compiled html, , in either case, there better way send template along form?


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more