1

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

JS 小提琴：https ://jsfiddle.net/U3pVM/24718/

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

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

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


});
4

4 回答 4

3

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

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

分叉的小提琴

有关更多信息，您可以参考这个答案，它有更详细的

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

于 2016-05-11T07:16:33.283 回答
0

你应该试试这个：

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

小提琴

于 2016-05-11T07:17:07.770 回答
0

您没有为输入指定名称。尝试这个：

<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>
于 2016-05-11T07:24:27.570 回答
0

正如其他人所说，在您的输入中添加“名称”属性。

我使用 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>

...

于 2016-05-11T07:31:09.700 回答