以角度驗證具有動態給定名稱的表單域

Question

我通過遍歷具有不同問題的對象來向用戶進行迭代，從而在視圖中動態創建表單。每個問題的屬性之一是formFieldName這是一個隨機字符串，我用它來給每個表單字段一個不同的名稱。

<form name="includedForm.newRequestForm" class="form-horizontal" role="form" novalidate>  

<div ng-if="message.question.attributes.structure.type == 'object'"> 
    <div ng-repeat="(index,objField) in message.question.attributes.structure.properties"> 
     <div ng-if="objField.type == 'array'" class="form-group" show-errors> 
      <label for="{{objField.formFieldName}}" class="control-label col-sm-6">{{objField.title}} 
       <br /><i><small>{{objField.description}}</small></i></label> 
      <div class="col-sm-6"> 
       <select class="form-control" name="{{objField.formFieldName}}" multiple ng-model="objField.userValue" ng-required="objField.required"> 
        <option ng-repeat="option in objField.items.enum" value="{{option}}">{{option}}</option> 
       </select> 
      </div> 
     </div> 

     <div ng-if="objField.type == 'boolean'" class="form-group" show-errors> 
      <label for="{{objField.formFieldName}}" class="control-label col-sm-6">{{objField.title}}</label> 
      <div class="col-sm-6"> 
       <input class="form-control" name="{{objField.formFieldName}}" ng-model="objField.userValue" type="checkbox" ng-value="option" ng-checked="message.question.attributes" /> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="col-sm-12"> 
    <button ng-click="markAsDone(message)" class="btn btn-primary">Done</button> 
</div> 
<form> 

在控制器中，我能夠獲得formFieldName屬性，但我無法弄清楚如何使用它來進行驗證。

var MarkAsDone = function(message) { 

    $scope.includedForm = {}; 
    var formField = message.question.attributes.formFieldName; 
    if ($scope.includedForm.newRequestForm.{{formField}}.$valid){ 
     //submit the form 
    } 
} 

Answer 1

回答你的問題：

1. 第一，{{}}是=== $範圍，所以你不使用HTML之外的任何地方。您在JS中使用$ scope，在HTML中使用{{}}創建一個管道（雙向綁定），這樣$ scope.variable.property就可以雙向綁定到HTML中的{{variable.property}}。

   $scope.includeForm.email === {{ includeForm.email }} === ng-model="includeForm.email" === ng-bind="includeForm.email" 
   

   ，如果你設置的所有的人都設置這樣，如果你設置$範圍將在HTML，顯然作爲用戶輸入被捕獲，它已經在$範圍出現......所有連接的

2. 當試圖從HTML獲取值返回到JS你需要創建並設置一個$範圍，所以如果你創建$ scope.dataModel.dataProperty並使用它在ng-model = dataModel.dataProperty（例子），你再次有兩個方式綁定...你不需要做任何事情，因爲角正在處理數據管道。所以，如果你要提取的值VAR，這可能是因爲$範圍已立即設定爲用戶檢查框

   var formField = $scope.dataModel.dataProperty; 
   // but like I said no need as $scope.dataModel.dataProperty; is your var 
   

3. 在JS如果你想使用動態屬性作爲廢物一個對象屬性鍵，您可以將動態值放置在[]中

   $scope.variable[dynamicProperty].method; 
   // you can set a static property as a key with dot notation i.e. 
   $scope.variable.staticProperty = val; 
   

希望幫助