2015-11-24 20 views
1

Alrighty,所以一些後面的故事。我們爲我們的應用程序使用Angularjs 1.3.15,並且動態地將表單元素添加到表單中。查看錶單的範圍時,正常的輸入元素不存在,但是ui-select和tag-input元素是。以下是我們的動態元素的指令代碼和其中一個模板的代碼。

這是該指令碼

return { 
     restrict: 'E', 
     link: function(scope , iElement, iAttrs) { 

      var display = iAttrs.data; 

      $http.get('views/templates/tripTemplates/' + display, {cache: $templateCache}).success(function(tplContent){ 
      iElement.replaceWith($compile(tplContent)(scope));     
      });    
     } 
    } 

這是元素代碼

<input type="number" class="form-control" step="any" min="{{field.MinValue}}" 
name="{{field.FieldId}}" max="{{field.MaxValue}}" 
ng-required="{{field.Required}}" ng-model="Trip[field.FieldId]" 
ng-change="makeDirty(field.FieldId); setDirty(field);" ng-disabled="locked == true"> 

這是正在使用該指令

<form name="trip_form_constraints.trip" role="form" class="form-validation" data-ng-submit="save(Trip)"> 
     <div class="panel-body" style="margin-bottom:9px;"> 
      <div class="form-group"> 
       <div class="row" ng-repeat="row in Rows"> 
        <div ng-repeat="field in row"> 
         <div class="col-sm-3 col-md-{{field.Width}} col-lg-{{field.Width}}" style="padding-bottom:7px;"> 
          <label tabindex="-1">{{field.Label}}</label> 
          <div> 
           <display-element data="{{field.Template}}"></display-element> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel-footer"> 
      <input type="submit" class="btn btn-w-md btn-gap-v btn-success" value="Save" ng-disabled="tripSaveDisabled" ng-if="Locked == false"/> 
      <div ng-if="Form.Name == 'Charter Ticket'"> 
       <a tabindex="-1" href="" data-tooltip="If there is no catch to add, proceed to submitting this trip." data-tooltip-placement="right" data-tooltip-append-to-body="true">Is this a trip with no catch?</a> 
      </div> 
     </div> 
     </form> 

工作的HTML模板

<ui-select ng-model="Trip[field.FieldId]" name="{{field.FieldId}}" theme="bootstrap" ng-required="{{field.Required}}" ng-if="field.Data.length > 1 && field.ParentFieldId != 0" ng-change="makeDirty(field.FieldId)" ng-disabled="locked == true"> 
    <ui-select-match allow-clear="true">{{$select.selected.Name}}</ui-select-match> 
    <ui-select-choices repeat="data.Id as data in field.Data | filter: $select.search | filter: filterByParent(field.ParentFieldId)"> 
     <div ng-bind-html="data.Name | highlight:$select.search"></div> 
    </ui-select-choices> 
</ui-select> 

我一直在使用NG-形式和嵌套形式的嘗試。我也嘗試創建一個表單列表,如myForm.form,但沒有奏效。我甚至升級到角1.4.5,但也沒有幫助。任何幫助將不勝感激。我還使用$超時來確保表單在檢查表單之前已完全加載。

下面是顯示普通輸入元素未添加到表單的plunkr。您可以通過console.log查看完整的表格或填寫數字部分並單擊保存。然後這會將所有附加到窗體範圍的元素添加到底部的數組中。希望這可以幫助。 http://plnkr.co/edit/C4ysZwEqjhaUA89vxjWP?p=preview

+0

你能提供樣品plunkr嗎? – Grundy

+0

什麼樣的標準輸入? –

+0

如果您無法創建jsfiddle或plunkr /添加可用於比較的元素模板。 – Shaun

回答

0

我們知道發生了什麼。我們最終使用了ng-forms指令並創建了兩個不同的命名錶單,即主表單和輔助表單。在此之後,輔助表單允許我們執行客戶端表單輸入錯誤。

相關問題