Question

基本上我有一个用angularJS和PHP制作的联系表格。那个托管在000webhost上。当我发送邮件时，邮件会通过，但它也会给我一个错误。我认为这不是显示MessageSuccess或MessageError消息的原因。

toArray()

HTML：

TypeError: Cannot read property 'name' of undefined
    at app.js:119
    at angular.min.js:81
    at angular.min.js:112
    at m.$get.m.$eval (angular.min.js:126)
    at m.$get.m.$digest (angular.min.js:123)
    at m.$get.m.$apply (angular.min.js:127)
    at l (angular.min.js:81)
    at P (angular.min.js:85)
    at XMLHttpRequest.H.onload (angular.min.js:86)

App.js

<div id="websiteApp" class="contactRow" style="display: none;">

    <form ng-submit="submitForm()" ng-controller="FormController" novalidate class="contactForm" name="form" ng-hide="loaded">

      <input class="input" type="text" name="name" placeholder="SINU NIMI" ng-model="formData.name" ng-class="{'error' : errorName}">

      <input class="input2" type="email" name="email"  placeholder="SINU E-MAIL" ng-model="formData.email" ng-class="{'error' : errorEmail}">

      <textarea name="message" ng-class="{'error' : errorTextarea}" placeholder="KIRJUTA MEILE" ng-model="formData.message" rows="5"></textarea>
      <input class="saada" type="submit" value="SAADA!" name="submit">
      <div ng-class="{'submissionMessage' : submission}" ng-bind="submissionMessage"></div>
    </form>
  </div>

和PHP

var app = angular.module('kaidoweb', ['ngRoute', 'ngAnimate']).
    config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {

 $locationProvider.html5Mode(true);

      $routeProvider.
        when('/', {
         templateUrl: 'pages/index.html',
         activetab: 'index',
         controller: HomeCtrl 
       }).
        otherwise({ redirectTo: '/' });
    }]).run(['$rootScope', '$http', '$browser', '$timeout', "$route", function ($scope, $http, $browser, $timeout, $route) {

        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
          $scope.part = $route.current.activetab;
        });

  }]);

/*app.config(['$locationProvider', function($location) {
    $location.hashPrefix('!');
}]);*/

//Contact form 
  app.controller('FormController',function($scope, $http) {
  // creating a blank object to hold our form information.
  //$scope will allow this to pass between controller and view
  $scope.formData = {};
  // submission message doesn't show when page loads
  $scope.submission = false;
  // Updated code thanks to Yotam
  var param = function(data) {
        var returnString = '';
        for (d in data){
            if (data.hasOwnProperty(d))
               returnString += d + '=' + data[d] + '&';
        }
        // Remove last ampersand and return
        return returnString.slice( 0, returnString.length - 1 );
  };
  $scope.submitForm = function() {
    $http({
    method : 'POST',
    url : 'process.php',
    data : param($scope.formData), // pass in data as strings
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
  })
    .success(function(data) {
      if (!data.success) {
       // if not successful, bind errors to error variables
       $scope.errorName = data.errors.name;
       $scope.errorEmail = data.errors.email;
       $scope.errorTextarea = data.errors.message;
       $scope.submissionMessage = data.messageError;
       $scope.submission = true; //shows the error message
      } else {
      // if successful, bind success message to message
       $scope.submissionMessage = data.messageSuccess;
       $scope.formData = {}; // form fields are emptied with this line
       $scope.submission = true; //shows the success message
      }
     });
   };
});

另外一件事是我在GoDaddy上尝试发送邮件时也会在GoDaddy上托管这个网站：POST http://www.kaidoweb.com/process.php 403（Forbidden）。

如果有人能在这里给我一些解决方案，并且如果你需要更多地看到更多问题，我将非常感激。

Answer 1

这就是你的PHP如何设置它返回到Angular App的错误对象：

if (empty($_POST['name']))
    $errors['name'] = 'Name is required.';
if (empty($_POST['email']))
    $errors['email'] = 'Email is required.';
if (empty($_POST['message']))
    $errors['message'] = 'Message is required.';

如您所见，在每种情况下，它都在errors数组中设置不同的键。在您的Angular代码中，您不会考虑到这一点，您只需假设所有密钥都将被设置：

$scope.errorName = data.errors.name;
$scope.errorEmail = data.errors.email;
$scope.errorTextarea = data.errors.message;

您可以在PHP或Angular App中修复此问题。在PHP中，您可以使用整数数组而不是关联数组：

if (empty($_POST['name']))
    $errors[] = 'Name is required.';
if (empty($_POST['email']))
    $errors[] = 'Email is required.';
if (empty($_POST['message']))
    $errors[] = 'Message is required.';

然后在Angular中设置范围变量并使用它的显示方式修改视图：

$scope.errors = data.errors;

<ul><li data-ng-repeat="error in errors">{{ error }}</li></ul>

或者，在Angular中，只需在尝试访问密钥之前检查密钥是否已设置：

if(data.errors.hasOwnProperty('name') {
    $scope.errorName = data.errors.name;
}

<强>更新

我正在谈论你的角度代码的这一部分，特别是成功回调中data.success是假的：

$scope.submitForm = function() {
    $http({
      method : 'POST',
      // ...
    })
    .success(function(data) {
        if (!data.success) {
            // if not successful, bind errors to error variables
            $scope.errors = data.errors;
            $scope.submission = true; //shows the error message
        } else {
            // ...
        }
    });
};

因为你可能会绑定到例如您的视图模板中的{{ errorName }}，无论在哪里，还必须使用上面的内容进行更新如果您切换$error数组以返回数字索引。< / p>

AngularJS PHP联系人无法读取属性名称

1 个答案: