Question

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

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

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

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


});

Answer 1

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

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

Forked Fiddle

有关详细信息，请参阅this answer，其中包含更详细的内容

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

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中验证表单

4 个答案: