如何在 Angular JS 中验证表单

Question

我是 angular JS 的新手。我正在尝试输入 type="text"，我正在从我的控制器中检索我的名字，我正在使用 $dirty 和 $invalid 来验证我的数据，但是当我制作时它没有显示输入字段为空。

JS Fiddle : https://jsfiddle.net/U3pVM/24718/

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

FormValidations.controller('FormsValidations', function( $scope ){

    $scope.formsToBeValidated = {
        firstName : 'Daniel'
    };


});

Answer 1

除非您将 name 属性添加到表单级别字段，否则当您在 form 的 name 属性中指定时，它不会包含在表单对象中，目前它是 name="studentForm"。请将 name="firstName" 添加到您的输入字段

<input type="text" class="form-control" 
  name="firstName" ng-model="formsToBeValidated.firstName" required/>

Forked Fiddle

更多信息可以参考，里面有更详细的

解决这个问题更方便的方法是使用 ng-messages 而不是 ng-show/ng-hide，因为你必须包含 ng-messages 模块及其 ng-messages依赖。

Answer 2

你应该试试这个：

      <input name="firstName" type="text" class="form-control" 
ng-model="formsToBeValidated.firstName" required>

fiddle

Answer 3

您没有在输入中指定名称。试试这个：

<form name="studentForm" novalidate>
    <input type="text" class="form-control" name ="input" ng-model="formsToBeValidated.firstName" required>
    <span studentForm.input.$error.required && studentForm.input.$dirty>First Name is Required</span>
</form>

Answer 4

正如其他人所说，将 "name" 属性添加到您的输入中。

我使用 ng-message 创建了一个自定义指令来显示输入错误（所以你必须包含它）

directives.directive('inputerrormsg', function () {
    return {
        replace: true,
        restrict: 'E',
        plain: true,
        scope: {
            inputdata: "=",
            dpattern: '@'
        },
        template: '<div class="help-block has-error text-center" ng-messages="inputdata[\'$error\']" >' +
        '<p ng-message="required">{{\'The field is required\'| translate }}</p>' +
        '<p ng-message="minlength">{{\'Input too short\'| translate }}</p>' +
        '<p ng-message="maxlength">{{\'Input too long\'| translate }}</p>' +
        '<p ng-message="email">{{\'Email invalid\'| translate }}</p>' +
        '<p ng-message="date">{{\'Date invalid\'| translate }}</p>' +
        '<p ng-message="number">{{\'Write number only\'| translate }}</p>' +
        '<p ng-message="pattern">' +
        '<span ng-switch="dpattern">' +
           '<span ng-switch-when="date">{{\'Date incorrecte: YYYY, YYYY/MM, YYYY/MM/DD\' |translate}}</span>' +
        '<span ng-switch-default>{{\'Saisir uniquement des lettres\'| translate }}</span>' +
        '</span>' +
        '</p>' +
        '</div>'
    }
});

用法：

必填字段

<div style="padding-left: 0px;" ng-class="{ 'has-error' : !formDeter.scientificname.$valid">
<div class="input-group no-padding">
    <input type="text"
           class="form-control input-md" name="scientificname"
           required />
    <span class="input-group-addon">
          <span class="glyphicon glyphicon-question-sign"></span>
    </span>
</div>
<dir.inputerrormsg inputdata="formDeter.scientificname" ></dir.inputerrormsg>

电子邮件：

<div class="form-group row" ng-class="{ 'has-error' : !formData.email.$valid }">
    <label class="col-xs-4 control-label">{{"Email" | translate }}</label>
    <div class="col-xs-8 input-group">
        <input type="email" class="form-control input-md" ng-model="email" name="email" id="email" required
               placeholder="{{'Email' | translate }}"/>
    </div>
    <dir.inputerrormsg inputdata="formData.email" dpattern="email" ></dir.inputerrormsg>
</div>

只有数字：

 <div class="form-group row" ng-class="{ 'has-error' : !formLocalisation.decimallongitude.$valid }">
    <label class="col-xs-4 control-label">{{"Longitude" | translate }}</label>
    <div class="col-xs-8 input-group">
        <input type="number" popover-trigger="focus" placeholder="{{'Longitude' | translate }}"
               class="form-control input-md" 
               ng-model="specimen.decimallongitude" name="decimallongitude"
                />
        <span class="input-group-addon" >
            <span class="glyphicon glyphicon-question-sign"></span>
        </span>
    </div>
    <dir.inputerrormsg inputdata="formLocalisation.decimallongitude" ></dir.inputerrormsg>
</div>

...

如何在 Angular JS 中验证表单

How to validate forms in Angular JS

forms

validation

angularjs

angularjs-forms