Verwendung von ng-Nachrichten mit dynamischen Feldnamen

Question

Ich habe eine Liste von Feldern, die mit ng-repeat angezeigt werden. Der Name des Eingabefeldes ist dynamisch. Wie erhalten Sie ng-Nachrichten bei dynamischen Namen? Unten ist das, was ich versucht habe, aber dies nicht funktioniert: mit text_

<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

Sie Präfix den Namen des Eingabefeldes, aber sie userForm.{{uniqueField.form_field_id}}.$error Nachschlag. das Präfix entfernen und es sollte :)

Hier arbeiten die Lösung HTML:

<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> 

Und der Controller:

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'); 
    } 
} 

Arbeits Geige: https://jsfiddle.net/trollr/133hhwzx/

Answer 2

Sie die $ verwenden können eval-Methode, können Sie mehr darüber lesen here, um die 'myDynamicForm.' + formField.formFieldId + '.$error' Zeichenfolge zu einem Ausdruck zu analysieren.

$ scope. $ Eval Führt den Ausdruck auf dem aktuellen Bereich und gibt das Ergebnis. Alle Ausnahmen im Ausdruck werden weitergegeben (nicht abgefangen). Dies ist nützlich, wenn Angular Ausdrücke

Auswertung finden Sie unter Arbeits jsfiddle here

Erinnern Sie sich das ngMessages Modul in Ihrer Anwendung Config zu registrieren.

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

Ich habe trollr Antwort geändert, und seine Arbeiten. ng-show="userForm[uniqueField.form_field_id].$error.required"

Hier ist die Lösung HTML ich die attr, fügte hinzu:

<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> 

Und der Controller:

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'); 
    } 
} 

Oder Sie können ng-Form anstelle von Formular-Tag verwenden.

Arbeitsgeige: http://jsfiddle.net/Q386jmnw/