Angular + Bootstrap輸入驗證錯誤類

Question

我試圖從this文章使用角度+引導做出例子。我有這方面的工作代碼：

<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，但它是一個非常老的線程。 什麼是最好的和正確的方式來避免這個紅色框在空場點擊？

歡迎任何整體代碼建議。 TY！ ）

Answer 1

我在做形式像這樣的事情我已經創建：

<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類不是引導的一部分，它的I類創建顏色需要代碼對象當沒有錯誤時。