ng-iletileri dinamik alan adlarıyla kullanma

Question

ng-repeat kullanılarak görüntülenen alanların bir listesini hazırla. Giriş alanının adı dinamiktir. Dinamik isimleri kullanırken ng-mesajlarını nasıl çalışırsınız? Aşağıda ne denedim, ama bu işe yaramazsa:

<form id="userForm" name="userForm" ng-submit="userForm.$valid && submit()" novalidate> 
    <div ng-repeat="uniqueField in uniqueFields"> 
     <div> 
      <label>{{uniqueField.form_field_label}}</label> 
      <input required="{{uniqueField.isMandatory}}" name="text_{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text"> 
      <div ng-messages="userForm.{{uniqueField.form_field_id}}.$error" ng-if="userForm.$submitted && uniqueField.isMandatory == true"> 
       <div ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div> 
      </div> 

     </div> 
    </div> 
</form> 

Answer 1

Sen text_ ile giriş alanının adı öneki ama userForm.{{uniqueField.form_field_id}}.$error arama.

<div ng-app="demoApp" ng-controller="MainCtrl as ctrl"> 
    <form id="userForm" name="userForm" ng-submit="userForm.$valid && ctrl.submit()" novalidate> 
    <div ng-repeat="uniqueField in ctrl.uniqueFields"> 
     <div> 
     <label>{{uniqueField.form_field_label}}</label> 
     <input required="{{uniqueField.isMandatory}}" name="{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text"> 
     <div ng-messages="userForm[uniqueField.form_field_id].$error"> 
      <div ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div> 
     </div> 
     </div> 
    </div> 
    <button type="submit">Submit</button> 
    </form> 
</div> 

Ve Denetleyici:

angular.module('demoApp', []) 
.controller('MainCtrl', MainCtrl); 

function MainCtrl($log) { 
    var ctrl = this; 

    function activate() { 
    ctrl.uniqueFields = [{ 
     form_field_label: 'Name', 
     form_field_id: 'name', 
     form_field_value: '', 
     isMandatory: true 
    }] 
    } 

    activate(); 

    ctrl.submit = function() { 
    $log.debug('form submitted'); 
    } 
} 

Çalışma keman: https://jsfiddle.net/trollr/133hhwzx/

Answer 2

Sen $ kullanabilirsiniz öneki çıkarın ve onu Burada :)

çalışmalıdır çözüm HTML'dir eval yöntemiyle, 'myDynamicForm.' + formField.formFieldId + '.$error' dizgisini bir ifadeye ayrıştırmak için here.

$ kapsamı. $ Eval geçerli kapsama ifadesini çalıştırır ve sonucu döndürür. İfadedeki herhangi bir istisna yayılır (yakalanmamış). jsfiddle here

Başvurunuz config ngMessages modülünü kaydolmayı unutmayın çalışan Eğik ifadeleri

bakınız

değerlendirirken yararlıdır.

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4" data-ng-controller="DynamicFormController as vm"> 
     <form name="myDynamicForm" novalidate> 
     <div class="form-group" data-ng-repeat="formField in formFields"> 
      <label for="{{formField.formFieldId}}">{{formField.label}}</label> 
      <input class="form-control" name="{{formField.formFieldId}}" id="{{formField.formFieldId}}" ng-required="{{formField.isMandatory}}" type="text" ng-model="formField.value"> 
      <div ng-messages="vm.onValidateMessages(formField)"> 
      <label ng-message="required" class="label label-danger">{{formField.label}} required</label> 
      </div> 
     </div> 
     <button type="button" class="btn btn-default" data-ng-click="vm.onSubmitForm()">Submit</button> 
    </form> 
    </div> 
</div> 

JS:

var myApp = angular.module('myApp', ['ngMessages']); 

myApp.controller('DynamicFormController', ['$scope', function($scope) { 
    var self = this; 

    $scope.formFields = [{ 
    isMandatory: true, 
    formFieldId: 'UniqueField1', 
    value: null, 
    label: 'Email' 
    }, { 
    isMandatory: false, 
    formFieldId: 'UniqueField2', 
    value: null, 
    label: 'First Name' 
    }]; 

    self.onSubmitForm = function() { 
    if (!$scope.myDynamicForm.$valid) { 
     console.error('form is invalid'); 
     return; 
    } 
    }; 

    self.onValidateMessages = function(formField) { 
    return $scope.$eval('myDynamicForm.' + formField.formFieldId + '.$error'); 
    }; 
}]); 

Answer 3

Ben trollr cevabını değiştirdiniz

ve çalışma.

<div ng-app="demoApp" ng-controller="MainCtrl as ctrl"> 
<code>{{userForm[uniqueField.form_field_id].$error}}</code> 
    <form id="userForm" name="userForm" `enter code here`ng-submit="userForm.$valid && ctrl.submit()" novalidate> 
    <div ng-repeat="uniqueField in ctrl.uniqueFields"> 
     <div> 
      <label>{{uniqueField.form_field_label}}</label> 
      <input required="{{uniqueField.isMandatory}}" name="{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text"> 
      <div ng-messages="userForm[uniqueField.form_field_id].$error"> 
       <div class="error" ng-show="userForm[uniqueField.form_field_id].$error.required" ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div> 
      </div> 
     </div> 
    </div> 
    <button type="submit">Submit 
    </button> 
</form> 
</div> 

Ve Denetleyici: Ben attr eklendi , İşte ng-show="userForm[uniqueField.form_field_id].$error.required"

çözüm HTML

angular.module('demoApp', []) 
    .controller('MainCtrl', MainCtrl); 

function MainCtrl($log) { 
    var ctrl = this; 

    function activate() { 
     ctrl.uniqueFields = [ 
     { 
     form_field_label: 'Name', 
     form_field_id: 'name', 
     form_field_value: '', 
     isMandatory: true 
     } 
    ] 
    } 

    activate(); 

    ctrl.submit = function() { 
    $log.debug('form submitted'); 
    } 
} 

Yoksa ng-formu yerine Form etiketini kullanabilirsiniz.

Çalışma kemanı: http://jsfiddle.net/Q386jmnw/