Question

我需要验证文本框。我正在使用ng-required =“true”，但它没有显示必需的消息。如果我点击保存按钮，它会直接放到save（）函数。如何避免它。

<div ng-app="LearnApp" ng-controller="csrControl">
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                :
            </td>
            <td>
                <input id="txtName" type="text" ng-model="txtName" ng-required="true" placeholder="Name" />
            </td>
        </tr>
        <tr>
            <td>
                Address
            </td>
            <td>
                :
            </td>
            <td>
                <input id="txtAddress" type="text" ng-model="txtAddress" ng-required="true" placeholder="Address" />
            </td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input id="btnSave" type="button" value="Save" class="button" ng-click="save()" />
                <input id="btnCancel" type="button" value="Cancel" class="button" />
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var app = angular.module("LearnApp", []);
    app.controller("csrControl", function ($scope, $http) {

        $scope.save = function () {

        };

    });
</script>

Answer 1

我认为你错过了Form标签。

<form name="myForm" >
  ....
</form>

Answer 2

您需要添加表单标记并为表单指定名称。并使用此名称作为错误消息，如：

all: Child\\a$$b\\\ \\\ {'}(a.o\#$$@,&+=~`),[].o

%.o: %.c
    $(CC) '$(subst ','"'"',$(subst \,,$(subst \\,/,$+)))'

并且还在服务器端放置条件以在保存之前验证表单：

 <form name="myForm" novalidate>

    //some code

    <input type="text" ng-model="abc" name="txt1" ng-required="true"/>
        <div ng-messages="myForm.txt1.$error">
            <div ng-message="required"> This is Required! </div>                                       
        </div>
 </form>

Answer 3

使用表单标记和 ng-submit ，如果您的表单有效，则会调用提供的函数或抛出默认的html5验证错误。仅使用“required”属性将需要输入。如果必须评估可以分配给ng-required指令的表达式，请使用ng-required。

如果您需要特定类型的错误消息并避免默认的html5验证，则可以在表单标记中使用 novalidate 指令。有关Angular表单验证的更多信息，官方documentation和此tutorial会有所帮助。

检查以下对代码的更改。

<form ng-submit="save()">
   <table>
    <tr>
        <td>
            Name
        </td>
        <td>
            :
        </td>
        <td>
            <input id="txtName" type="text" ng-model="txtName" required placeholder="Name" />
        </td>
    </tr>
  <tr>
        <td colspan="3" align="right">
            <input id="btnSave" type="submit" value="Save" class="button"/>
            <input id="btnCancel" type="button" value="Cancel" class="button" />
        </td>
    </tr>
</form>

如何在AngularJS中验证文本框

3 个答案: