时间戳

首页 > 解决方案 > 如何使用AngularJS验证表单提交

angularjs - 如何使用AngularJS验证表单提交

问题描述

我在 Angular js 方面非常新。我想在提交时使用 Angular js 验证和发布表单数据。我搜索了谷歌，但大多数都禁用了加载按钮，在使用有效数据完成表单后，按钮启用但我想在表单提交时显示错误消息。

这是我的表单快照

我已经测试了两个文本字段，一个是姓名，另一个是电子邮件，但我想为每个字段设置正确的消息，例如电子邮件、电话号码（有效格式）和空字段，现在我只收到空字段消息。

 <span class="error-message"
 ng-show="showMessage(frmReg.name)">
 Please complete this field.</span> 

var app=angular.module('regForm',[]);

app.controller('FormController',function($scope,$http){
    $scope.frmRegField={};

    $scope.frmSubmit=function(){
        angular.forEach($scope.frmReg.$error.required, function(field) {
          field.$setDirty();
        });

        // $http({
            // method:"POST",
            // url:"form_submit.php",
            // data:$scope.frmRegField
            // }).success(function(data){

            // });
    };

    $scope.showMessage=function(input){
        console.log(input.$$attr.name);
         var show = input.$invalid && (input.$dirty || input.$touched);
         return show;

    };
});

标签： angularjsvalidationangularjs-forms

解决方案

您可以使用类或状态来做您需要的事情

输入字段具有以下状态：

  • $untouched领域尚未触及
  • $touched领域已被触及
  • $pristine该字段尚未修改
  • $dirty The字段已修改
  • $invalid字段内容无效
  • $valid字段内容有效

它们都是输入字段的属性，或者为真或为假。

表单具有以下状态：

  • $pristine尚未修改任何字段
  • $dirty一项或多项已被修改
  • $invalid表单内容无效
  • $valid表格内容有效
  • $submitted表格已提交

以下类被添加到输入字段或从输入字段中删除：

  • ng-untouched领域尚未触及
  • ng-touched领域已被触及
  • ng-pristine该字段尚未修改
  • ng-dirty字段已修改
  • ng-valid字段内容有效
  • ng-invalid字段内容无效
  • ng-valid-key每个验证一个密钥。示例：ng-valid-required，当有不止一件事情需要验证时很有用
  • ng-invalid-key例子：ng-invalid-required

以下类被添加到表单中或从表单中删除：

  • ng-pristine没有字段尚未修改
  • ng-dirty一个或多个字段已被修改
  • ng-valid表格内容有效
  • ng-invalid表单内容无效
  • ng-valid-key每个验证一个密钥。示例：ng-valid-required，当有不止一件事情需要验证时很有用
  • ng-invalid-key例子：ng-invalid-required

如果它们代表的值是 ，则删除这些类false。

为表单命名：

<form name="myForm">

以及输入的名称：

<input type="text" name="myName">

然后在您的跨度中使用 ng-show/ng-if：

<span class="error-message" ng-show="myForm.myName.$touched && myForm.myName.$invalid">
 Please complete this field.
</span>

您也可以使用 ng-disabled 来验证提交：

<input type="submit" value="Submit" ng-disabled="myForm.$invalid">

希望这可以帮助。祝你好运！

推荐阅读