AngularJS 1.6.8: невозможно отправить форму и отобразить сообщение об успехе

У меня есть простая форма отправки запроса с полями имени, электронной почты и запроса и компонент с функцией контроллера, имеющей функцию отправки для отправки формы.

я использую ng-submit директива в <form></form> тег, чтобы отправить пользовательский ввод и отобразить сообщение об успехе при отправке.

Ниже приведен код для соответствующих файлов.

contact.html

<div ngController="contactController as vm">
        <div class="heading text-center">
        <h1>Contact Us</h1>
    </div>
    <div>
        <form class="needs-validation" id="contactForm" novalidate method="post" name="vm.contactForm" ng-submit="saveform()">
            <div class="form-group row">
                <label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="vm.name" required>
                    <div class="invalid-tooltip">
                        Please enter your full name. 
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
                    </div>
                    <input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email" 
                    aria-describedby="validationTooltipUsernamePrepend" ng-model="vm.email" required>
                    <div class="invalid-tooltip">
                        Please choose a valid email.
                    </div>
                </div>
            </div>

            <div class="form-group row">
              <label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
              <div class="input-group">
                    <input type="text" class="form-control" id="validationTooltipQuery" ng-model="vm.query" placeholder="Query" required>
                    <div class="invalid-tooltip">
                        Please write your Query.
                    </div>
                </div>
            </div>
            <div class="btn-group offset-md-5">
                <button class="btn btn-primary" type="submit">Submit</button>
                <button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>  
            </div>
          </form>
          <span data-ng-bind="Message" ng-hide="hideMessage" class="sucessMsg"></span>
    </div>
</div>

contact.component.js

angular.module('myApp')
  .component('contactComponent', {
  restrict: 'E',
  $scope:{},    
  templateUrl:'contact/contact.html',
  controller: contactController,
  controllerAs: 'vm',
  factory:'userService',
  $rootscope:{}
});

function contactController($scope, $state,userService,$rootScope) {
  var vm = this;
  $scope.navigate = function(home){
    $state.go(home)
  };
  $scope.saveform = function(){

    $scope.name= vm.name;
    $scope.email= vm.email;
    $scope.query= vm.email;


    $scope.hideMessage = false;
    $scope.Message = "Your query has been successfully submitted."

  };
  $scope.user = userService;
};

//localStorage code

function userService($rootScope) {
  var service = {
    model: {
        name: '',
        email: '',
        query:''
    },
    SaveState: function () {
        sessionStorage.userService = angular.toJson(service.model);
    },
    RestoreState: function () {
        service.model = angular.fromJson(sessionStorage.userService);
    }
  }
  $rootScope.$on("savestate", service.SaveState);
  $rootScope.$on("restorestate", service.RestoreState);
  return service;

  $rootScope.$on("$routeChangeStart", function (event, next, current) {
    if (sessionStorage.restorestate == "true") {
        $rootScope.$broadcast('restorestate'); //let everything know we need to restore state
        sessionStorage.restorestate = false;
    }
  });
  //let everthing know that we need to save state now.
  window.onbeforeunload = function (event) {
    $rootScope.$broadcast('savestate');
  };
};

ОБНОВЛЕНИЕ: При отправке, когда я проверяю ответ на вкладке сети в инструментах разработчика, я не вижу отправленные значения. Я вижу только разметку.

1 ответ

В вашем шаблоне название метода saveform:

ng-submit="saveform()"

Но в вашем контроллере это save:

$scope.save = function() { ... }

Переименуйте его в saveform:

$scope.saveform = function() { ... }
Другие вопросы по тегам