Javascript 提交时的角度验证

我正在尝试创建一个表单，如果您不填写任何字段，则在单击提交时将显示一条警告消息。我正试图通过角度验证来实现这一点；然而，它根本不起作用。以下是我目前拥有的代码：

（1） HTML事件表单文件

函数mainController（$scope，$http）{
$scope.formData={}；
$http.get（“/api/events”）
.成功（功能（数据）{
$scope.events=数据；
initMap（数据）；
对于（i=0；i

事件名称
类型
选择1
选择2
选择3
选择4
位置
地点1
地点2
地点3
活动详情
提交
以正确的方式进行


角度模块（'exApp'，[]）
.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.save=函数（无效）{
如果（！invalid）{console.log（'Form Submitted'）；}
}
}]);

姓名：


告诉我们你的名字。
电邮：


告诉我们你的电子邮件。
这不是一封有效的电子邮件。
性别：
男性的
女性的


我同意：


请同意并签字。
以正确的方式进行


角度模块（'exApp'，[]）
.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.save=函数（无效）{
如果（！invalid）{console.log（'Form Submitted'）；}
}
}]);

姓名：


告诉我们你的名字。
电邮：


告诉我们你的电子邮件。
这不是一封有效的电子邮件。
性别：
男性的
女性的


我同意：


请同意并签字。
您可以使用
ng submit
进行表单验证


对于验证，使用
ng model
变量验证表单

$scope.validateForm = function() { 
    if (!$scope.formData.eventName || !$scope.formData.eventType  ) {
      alert("Please fill in all required fields!");
      return false;

  }

您可以使用
ng submit
进行表单验证


对于验证，使用
ng model
变量验证表单

$scope.validateForm = function() { 
    if (!$scope.formData.eventName || !$scope.formData.eventType  ) {
      alert("Please fill in all required fields!");
      return false;

  }

Angular在使用表单时提供了一些帮助。它为窗体提供了不同的对象。它们在验证表单时非常有用：


$pristine：如果用户尚未与表单交互，则为true
$dirty：如果用户已与表单交互，则为true
$valid:true，如果所有控件都有效
$invalid：如果至少有一个控件无效，则为true
$error:它包含对所有无效控件的引用

您可以通过表单对象使用这个对象，在您的例子中是myForm。因此，您可以使用以下方法检查用户是否填写了任何字段：

$scope.validateForm = function(myForm) {
  if(myForm.$pristine) {
    alert("Please fill in all required fields!");
  }
}

Angular在使用表单时提供了一些帮助。它为窗体提供了不同的对象。它们在验证表单时非常有用：


$pristine：如果用户尚未与表单交互，则为true
$dirty：如果用户已与表单交互，则为true
$valid:true，如果所有控件都有效
$invalid：如果至少有一个控件无效，则为true
$error:它包含对所有无效控件的引用

您可以通过表单对象使用这个对象，在您的例子中是myForm。因此，您可以使用以下方法检查用户是否填写了任何字段：

$scope.validateForm = function(myForm) {
  if(myForm.$pristine) {
    alert("Please fill in all required fields!");
  }
}

试试这个：


使用
myForm.$valid
条件将
ng submit
添加到元素中
在提交按钮上添加一个
ng click=“submitted=true”
事件，该事件将在单击提交按钮时触发
在所有输入字段或必填字段中添加
required
属性

演示


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.validateForm=函数（）{
警报（“提交”）；
};
});

缺少事件名称

缺少事件类型