Question

我创建了一个包含六个字段的表单，其中五个是必填字段。有一个提交按钮。如果用户未在文本框中输入任何输入并单击提交按钮，则所有必需的文本框应以红色边框突出显示。如何执行呢？：-

<div ng-app="myApp" ng-controller="formCtrl">
        <form name="demoForm">
            <label>First Name :</label>
            <input type="text" ng-model="firstName" required/><br><br>
            <label>Last Name :</label>
            <input type="text" ng-model="lastName"/><br><br>
            <label>Email :</label>
            <input type="email" ng-model="emailDet" required/><br><br>
            <label>Contact No :</label>
            <input type="text" ng-model="contactNo" required/><br><br>
            <label>Current Location :</label>
            <input type="text" ng-model="currLoc" required/><br><br>
            <label>Preferred Location :</label>
            <input type="text" ng-model="preLoc" required/><br><br>
            <button type="button" ng-click="onSubmit()">Submit</button>
        </form>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function($scope) {
            $scope.onSubmit = function() {

            }
        });
    </script>

Answer 1

这很容易。像这里定义新的CSS规则，一切都很好

.ng-invalid.ng-submitted input {
     border: 1px solid red;
}

在引擎盖下，角度为您的表单和输入分配了许多类。

.ng-无效

表示表单上有问题

.ng提交

该表单已提交的信号。

以此类推。查看文档，您会发现很多新发现。

带有验证的AngularJS表单

1 个答案: