簡易Angular JSコンタクトフォームは提出していません

Question

私は簡単なコンタクトフォームに取り組んでいます。 HTMLは、このように簡単です：

<form name="contactForm" ng-submit="contactForm.$valid && vm.submit()" novalidate> 
       <div class="form-group"> 
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
         <input type="text" placeholder="Full name" name="name" ng-minlength="1" max="20" 
           ng-model="vm.data.name" id="name" class="form-control" required> 
        </div> 
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
         <input type="email" ng-minlength="1" placeholder="Email address" name="contactemail" 
           ng-model="vm.data.contactemail" class="form-control" required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <input type="text" ng-model="vm.data.subject" name="subject" ng-minlength="1" id="" 
           placeholder="Subject" class="form-control" required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <textarea class="form-control" ng-model="vm.data.message" name="message" ng-minlength="1" 
            placeholder="Your message"></textarea> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <input type="submit" class="btn btn-primary" /> 
        </div> 
       </div> 
      </form> 

NG-提出= "$のContactForm有効& & vm.submit（）。" 次のように私のContactController内部関数vm.submit（）に提出する必要があります。

(function() { 
    'use strict'; 

    angular 
    .module('xyz') 
    .controller('ContactController', ContactController); 

    /** @ngInject */ 
    function ContactController($rootScope,$stamplay,Page,toastr,$log) { 
    alert('BOO!'); 

var vm = this; 
vm.data = {}; 

$rootScope.data = vm.data; 

vm.submit = function(){ 
    alert('BOO!'); 
    $stamplay.Object("contact") 
    .save(vm.data) 
    .then(onSuccess, onError); 
}; 

var onSuccess = function() { 
    toastr.success('Your message has been delivered!'); 
}; 

var onError = function() { 
    toastr.error('Seems to be a problem'); 
}; 

$rootScope.Page = Page; 
Page.setTitle('WHDS | Contact'); 
Page.setDescription('How to contact us here at the surgery'); 

// FOR DEV 

$log.info($rootScope); 
} 

})(); 

vmはすでにこのように宣言されていますが、送信機能内にアラートを入れても何も表示されません。私は、次のしている私のroute.jsで

：

として正しいテンプレート、コントローラ名とコントローラをある

.when('/contact', { 
    templateUrl: 'app/contact/contact.html', 
    controller: 'ContactController', 
    controllerAs: 'vm' 
    }) 

。これらのすべてが一見正しいとはいえ、なぜフォームが提出しないのか分かりません。任意のアイデアを高く評価ありがとう

Answer 1

あなたのコントローラに依存関係の注入がありません。あなたの関数宣言の後、この注射ステートメントを追加します。また、

ContactController.$inject=['$rootScope', '$stamplay', 'Page', 'toastr', '$log']; 

、NG-提出onsubmitイベント発生に角度の式を結合できます。 contactForm。$ validは真実であり、呼び出すことのできる関数ではないことを確認します。追加提出ngのからそれを削除NG-無効= "のContactForm $有効！。" あなたの送信ボタンに、次のように：

<form name="contactForm" ng-submit="vm.submit()" novalidate> 

と

<input type="submit" class="btn btn-primary" ng-disabled="!contactForm.$valid"/> 

はここの一部と作業plunkです依存関係（$ stamplay、Page、toastr、$ log）が取り除かれ、本当の問題に遭遇することができました。