1

我正在尝试使用 angular+bootstrap 从本文中举例。我有这个工作代码:

<div ng-controller="Ctrl">
    <br>
    <hr>

    <form name="signup_form" novalidate ng-submit="signupForm()">
        <fieldset>
            {{' signup_form.submitted \''+signup_form.submitted+ '\' ' }}<br>
            {{' submitted \''+submitted+ '\' ' }}<br>
            {{' $scope.signup_form.$valid \''+signup_form.$valid+ '\'' }}

            <div class="control-group" ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}">
                <legend>Signup</legend>
                <div class="row">
                    <div class="span12">
                        <label>Your name</label>
                        <input type="text"
                               placeholder="Name"
                               name="name"
                               ng-model="signup.name"
                               ng-minlength=3
                               ng-maxlength=20 required/>
                    </div>
                </div>
            </div>
            <button type="submit" class="button radius">Submit</button>
        </fieldset>
    </form>

</div>

http://jsfiddle.net/cQ324/3/

问题是:

  1. 这段代码:

    <div class="control-group" ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}">
    

    看起来不是很好。我觉得这样做不是一个好习惯。怎么可能更容易和正确?

  2. 如果我按下输入字段,我会立即得到红色边框。我在 github.com/twbs/bootstrap/issues/1675 发现了这个问题,但它是一个非常古老的线程。什么是避免在空字段单击时出现此红色框的最佳和正确方法?

欢迎任何整体代码建议。泰!)

4

1 回答 1

0

我在我创建的表单中做了这样的事情:

<div class="form-group col-md-3 input-group-lg" ng-class="{true: 'has-error',false: 'is-required'}[createContacts.proposer.$dirty && createContacts.proposer.$invalid]">
    <label class="control-label" for="proposer">Name *</label>
    <input type="text" class="form-control" name="proposer" id="proposer" placeholder="First & Last Name" ng-model="proposer.name" required>    
    <span class="help-block" ng-show="createContacts.proposer.$dirty && createContacts.proposer.$error.required">Proposer's name is required.</span>
</div>

ng-class="{true: 'has-error',false: 'is-required'}[createContacts.proposer.$dirty && createContacts.proposer.$invalid]"

is-required类不是引导程序的一部分,它是我创建的一个类,用于在没有错误时对所需对象进行颜色编码。

于 2013-10-11T13:22:25.530 回答