使用angular data-ng-show指令显示错误

Question

我使用data-ng-show指令显示错误。它工作正常。唯一的问题是消息显示在下一行。要求是将其显示在同一行上。

我写的HTML代码如下：

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()">
    <fieldset>
        <div class="col-md-9">
            <label for="title" class="control-label">Title</label>
            <input name="title" type="text" class="form-control" data-ng-model="newTopic.title" required data-ng-minlength="5" />
            <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span>
            <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span>
        </div>
</fieldset>
</form>

我正在使用布局页面（_Layout.cshtml），如下所示：

<div class="main">
        <div class="container">
            <div class="row">
                @RenderBody()
            </div>
        </div>
    </div>

请让我知道我错过了什么，谢谢。

Answer 1

我想你是使用bootstrap的水平形式？试试这个：

<form name="newTopicForm" novalidate class="form-horizontal" data-ng-submit="save()">
    <div class="form-group">
        <label name="title" for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-6">
            <input type="email" data-ng-model="newTopic.title" required data-ng-minlength="5" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
        <div class="col-sm-4">
            <span class="error" data-ng-show="newTopicForm.title.$error.required">*</span>
            <span class="error" data-ng-show="newTopicForm.title.$error.minlength"> Minimum 5 Characters</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div>
    </div>
</form>

您必须遵循文档http://getbootstrap.com/css/#forms

中指定的HTML语法

Answer 2

根据您的代码建议，您也使用Twitter BootStrap。在twitter bootstrap＆＃39; form-control＆＃39; class，element占据列的100％宽度。要使它在同一行中，您应该创建单独的列，如下所示 -

addNewValue