Question

我在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;

    };
});

Answer 1

您可以使用类或状态来执行所需的操作

输入字段具有以下状态：

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

它们都是输入字段的属性，并且为true或false。

表单具有以下状态：

$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">

希望这会有所帮助。祝你好运！

如何使用AngularJS在表单提交上进行验证

1 个答案: