Question

我有一个angularJs表单，它有多个控件。最初加载页面时，所有内容都适合表单。显示验证消息时，不显示提交按钮，取消按钮。这些按钮正在下面。下面是index.cshtml中的代码。我只放了几个控件，还有其他控件。

  <body class="ng-cloak">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
    <div ng-controller="testController" ng-init="init()">
        <form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">       

            <div>
                <!-- HEADER AND NAVBAR -->
                <header>
                    <nav class="navbar navbar-default">
                        <div class="container">
                            <div class="navbar-header">
                                <a class="navbar-brand">Test</a>
                            </div>
                            <ul class="nav navbar-right nav-pills">
                                <li ng-class="{active: createMenu}">
                    <a  href="" ng-click="show('createMenu')">Create</a></li>
                                <li ng-class="{active: dashboardMenu}">
                                    <a href="" ng-click="show('dashboardMenu')"> Dashboard</a>
                                </li>
                            </ul>

                        </div>
                    </nav>
                </header>
            </div>
            <div class="container" ng-show="createMenu">
                <br />
                <div class="row">
                    <div class="col-sm-2">
                        <label class="control-label">Groups:</label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
                            <option value="">-- Select the Group --</option>
                        </select>
                    </div>
                </div>
                <span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>

                <br />
                <div class="row">
                    <div class="col-sm-2">
                        <label>Name :</label>
                    </div>
                    <div class="col-md-6 form-group">
                        <input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
                    </div>
                </div>
                <span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
                <br />
                <br />

               <div class="row">
                    <div class="col-sm-6">
                        <label class="control-label">Start date</label>
                        <div class="form-group">
                            <div class="input-group date" id="startDatepicker">
                                <input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
                    </div>
                    <div class="col-sm-6">
                        <label class="control-label">End date</label>
                        <div class="form-group">
                            <div class="input-group date" id="endDatepicker">
                                <input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
                    </div>

                    <!--/col-->
                    <div class="col-sm-6">
                        <label class="control-label">Start Time</label>
                        <div class="form-group">
                            <div class="input-group" id="startTimepicker">
                                <input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>
                                </span>
                            </div>
                        </div>
                        <span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
                    </div>

                    <div class="col-sm-6">
                        <label class="control-label">End Time</label>
                        <div class="form-group">
                            <div class="input-group" id="endTimepicker">
                                <input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>

                                </span>
                            </div>
                        </div>
                        <span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-6">

                            <input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" /> 
                            <input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
                        </div>

                    </div>
                    <br/>
                </div>
            </div>

即使在显示验证消息期间，是否可以适合内容？我没有设置任何特定的类来设置高度。当表单高度增加时，如何确保提交和取消按钮也可见。我查看了此链接extending a form's height to fit the content in the form，但找不到解决方案。

添加代码段以显示问题：初始加载显示为：

发出错误消息后：感谢

Answer 1

要根据内容自动调整任何内容，您可以使用 min-height 属性。

min-height:100px;

试试这个，将其添加到表单 css中，就像这样

<form name="mainForm" id="createForm" 
      ng-submit="mainForm.$valid && add()" 
      novalidate=""
      style="min-height:100px;">

根据AngularJs中的内容增加表单高度

1 个答案: