Question

我是角色的新手，我正在尝试（并且失败）让ngClass在基本联系表单上进行一些验证。

我希望通过使用bootstrap突出显示错误来突出显示输入成功/错误时的输入＆＃39; has-error＆＃39;和＆＃39; glyphicon-remove＆＃39;如果数据有问题，则为类。

我的表格如下;

<form class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
                    <div class="col-md-12">
                        <h2>Quick Form</h2>
                        <div class="form-group has-feedback">
                            <div class="input-group col-md-12">
                                <label for="titleSelect" class="input-group-addon">Title :</label>

                                <select name="titleSelect" id="titleSelect" class="form-control"
                                        ng-model="form.titleResult" required>
                                    <option value="">Select Title...</option>
                                    <option ng-repeat="option in titles" value="{{option.name}}">{{option.name}}</option>
                                </select>
                            </div>
                            <div class="input-group col-md-12" ng-class="{ 'has-error': form.name.$invalid, 'text-success' : form.name.$valid}">
                                <label for="nameInput" class="input-group-addon">Name :</label>
                                <input type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="form.name" required>
                                <span ng-class="{ 'glyphicon-remove' : form.name.$invalid, 'glyphicon-ok' : form.name.$valid }" class="glyphicon form-control-feedback"></span>
                            </div>

                            <div class="input-group col-md-12">
                                <label for="postcodeInput" class="input-group-addon">Postcode :</label>
                                <input type="text" class="form-control" id="postcodeInput" placeholder="Postcode..." ng-model="form.postcode" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="emailInput" class="input-group-addon">Email :</label>
                                <input type="email" class="form-control" id="emailInput" placeholder="Email Address..." ng-model="form.email" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="telephoneInput" class="input-group-addon">Telephone :</label>
                                <input type="text" class="form-control" id="telephoneInput" placeholder="Telephone Number..." ng-model="form.telephone" required>
                                <span class="glyphicon form-control-feedback"></span>
                            </div>
                            <div class="input-group col-md-12">
                                <label for="timeSelect" class="input-group-addon">To to Call :</label>

                                <select name="timeSelect" id="timeSelect" class="form-control"
                                        ng-model="form.timeResult" required>
                                    <option value="">Select Time...</option>
                                    <option ng-repeat="option in times" value="{{option.name}}">{{option.name}}</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-block" ng-click="submit(form)">Request Callback!</button>
                            </div>
                        </div>
                    </div>
                </form>

我的控制器如下;

'use strict';
app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.titles =
   [
  { id: '1', name: 'Mr.' },
  { id: '2', name: 'Mrs.' },
  { id: '3', name: 'Master.' },
  { id: '4', name: 'Miss.' },
  { id: '5', name: 'Sir.' },
  { id: '6', name: 'Dr.' },
  { id: '7', name: 'Other.' }
   ];

$scope.times = 
           [
  { id: '1', name: 'Morning.' },
  { id: '2', name: 'Afternoon.' }
           ];

$scope.submit = function (form) {

    console.log(form);
};

}]）;

但是，没有应用ngclass指令？即使表单无效，似乎也会调用提交？我是否还需要从控制器验证表单？

Answer 1

为表单标记＆amp;添加名称属性和值。输入...

<form name="form" class="row instant-quote-form" ng-controller="formCtrl" ng-cloak>
&
<input name="name" type="text" class="form-control" id="nameInput" placeholder="Full Name..." ng-model="name" required>

因为当您在form.name中引用'has-error': form.name.$invalid时，它会根据表单名称和输入框名称进行操作

注意使用form.name作为您的ng模型存在冲突，基于您需要的控制器ng-model="name"

这是一个有效的plnkr

使用ngClass和AngularJS进行表单验证无效

1 个答案: