使用ng-repeat和bootstrap css和span標籤獲取錯誤消息

我正在使用Angular Js，其中我使用了引導css。我有一個ng-repeat被添加到表單中。我在頁面末尾有一個提交按鈕。我已經爲在ng-repeat中創建的每個控件添加了必需的字段驗證。點擊提交按鈕，如果數據在ng-repeat的任何行中都不可用，則顯示錯誤消息。這工作正常。但是，如果ng-repeat中有20行，並且如果全部爲空，則單擊提交按鈕將拖動該頁面，從而使提交按鈕變爲不可見。我用下面的代碼：使用ng-repeat和bootstrap css和span標籤獲取錯誤消息

<link href="/Content/bootstrap.css" rel="stylesheet" /> 
<body class="ng-cloak"> 
<div ng-controller="testController" ng-init="init()"> 
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate=""> 
    <div class="row" ng-repeat="Descriptions in seasonsWithDescription "> 
        <div class="form-group col-md-2 top-Margin-language"> 
         <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label> 
        </div> 
        <div class="form-group col-md-4 top-Margin-Title"> 
         <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" /> 
         <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span> 
        </div> 

        <div class="form-group col-md-5"> 
         <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea> 
         <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span> 
        </div> 


        <br /> 
       </div> 
<br/> 
    <div class="form-group"> 
<div class="col-sm-offset-4 col-sm-6"> 
          <input type="submit" value="Submit" ng-click="submitted=true" /> 
         </div> 
        </div>

添加截圖中越解釋：顯示錯誤消息時

正如你所看到的，按鈕也越來越無形。這是在ng-repeat中使用css和span的正確方法。我嘗試過設置

style="min-height:100px;"

的形式，但是沒有解決它。如何解決這個問題？謝謝

來源

2017-01-19 venkat14

請給你的代碼和CSS plunker。 – Jenny

我正在第一次創造蹲伏者。不知道，如果我所做的是正確的 - http://plnkr.co/edit/eotknyBr4nTpBY9aRvwk?p=preview – venkat14

添加您的代碼我的意思是腳本在plunker否則它不會有用 – Jenny

它可以工作，但它比它需要更復雜。檢查出角形式（下面的鏈接）

<div class="form-group col-md-5"> 
    <textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea> 
    <span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span> 
</div>

將變成（造型除外）

<div class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name" required> 
</div>

https://angular.io/docs/ts/latest/guide/forms.html

有許多的驗證規則內置到所需

一個角輸入

ng-required =「{boolean}」
NG-MINLENGTH = 「{數}」
NG-的maxlength = 「{數}」
NG-圖案= 「{串}」
納克變= 「{字符串}」>

更多關於輸入驗證用途：https://docs.angularjs.org/api/ng/directive/input

希望這有助於簡化一些代碼的

來源

2017-04-13 22:21:38

使用ng-repeat和bootstrap css和span標籤獲取錯誤消息

回答

相關問題