Question

我正在尝试使用Laravel Blade中的AngularJS进行表单验证，但它无法正常工作，点击提交按钮 undefined 会在控制台中打印出来。

HTML：

<div class="uk-grid" ng-app="validationApp" ng-controller="mainController">
  <form name="signupForm" class="uk-form uk-width-1-2" novalidate>
    {{ csrf_field() }}
    <fieldset class="pad50">
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Username" type="text" name="username" ng-modal="user.username" required>
        <div ng-show="signupForm.$submitted || signupForm.username.$touched">
          <span ng-show="signupForm.username.$error.required">Username is required.</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Email" type="email" name="user_mail" ng-modal="user.user_mail" required>
        <div ng-show="signupForm.$submitted || signupForm.user_mail.$touched">
          <span ng-show="signupForm.user_mail.$error.required">Email is required.</span>
          <span ng-show="signupForm.user_mail.$error.email">Enter a valid email.</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Password" type="password" name="user_pass" ng-modal="user.user_pass" required>
        <div ng-show="signupForm.$submitted || signupForm.user_pass.$touched">
          <span ng-show="signupForm.user_pass.$error.required">Password is required</span>
        </div>
      </div>
      <div class="uk-form-row">
        <input class="bradius2" placeholder="Confirm Password" type="password" name="user_cpass" ng-modal="user.user_cpass" required>
        <div ng-show="signupForm.$submitted || signupForm.user_cpass.$touched">
          <span ng-show="signupForm.user_cpass.$error.required">Confirm the password</span>
        </div>
      </div>
      <div class="uk-form-row">
        <button class="uk-button bgorange butn uk-button-large" type="submit" id="sign_up_button" ng-click="signupUser(user)">
          <b>SIGN UP VIA EMAIL</b>
        </button>
      </div>
    </fieldset>
  </form>
</div>

app.js：

angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.signupUser = function(user) {
        $scope.master = angular.copy(user);
        console.log(user);
    };

}]);

我正在使用Angular版本1.6.1和UIKit。

提前致谢！

Answer 1

必须是ng-model而不是ng-modal。 ng-model是以表格形式存储用户输入的模型。

Answer 2

未定义在控制台中打印

您需要初始化user对象

angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
    $scope.master = {};
     $scope.user = {};// here
    $scope.signupUser = function(user) {
        $scope.master = angular.copy(user);
        console.log(user);
    };
}]);

表格验证不起作用AngularJS

您应该在表单标记

上添加此代码

ng-submit="mainForm.$valid && yourfunction()" //你的功能意味着你想要开火的事件

Answer 3

注意ng-messages：

    <div class="uk-form-row" >
        <input class="bradius2" placeholder="Username" type="text" name="username" ng-model="user.username" required>
        <div ng-messages="signupForm.username.$error" ng-show="signupForm.$submitted || signupForm.username.$touched">
      <span ng-show="signupForm.username.$error.required">Username is required.</span>
    </div>
  </div>

表格验证不适用于AngularJS

3 个答案: