Wie man dynamisch erzeugte Eingaben mit ng-repeat, ng-show (angular) validiert

Seit die Frage gestellt wurde das Angular-team hat dieses Problem gelöst, indem Sie es ermöglicht, dynamisch erstellen von "input" - Namen.

Mit Eckige version 1.3 und höher können Sie jetzt tun:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

Demo

Angular 1.3 eingeführt ngMessages, ein mächtigeres Werkzeug für die Formular-Validierung. Sie können das gleiche Verfahren verwenden, mit ngMessages:

<form name="vm.myFormNgMsg" novalidate>
    <div ng-repeat="p in vm.persons">
      <input type="text" name="person_{{$index}}" ng-model="p" required>
      <span ng-messages="vm.myFormNgMsg['person_' + $index].$error">
        <span ng-message="required">Enter a name</span>
      </span>
    </div>
  </form>

InformationsquelleAutor der Antwort HoffZ

Verwendung der ng-form-Richtlinie innerhalb des Tags, in dem Sie mit der ng-repeat-Direktive. Sie können dann verwenden Sie den scope-erstellt von ng-form-Richtlinie als Verweis zu einer generischen Namen. Zum Beispiel:

    <div class="form-group col-sm-6" data-ng-form="subForm" data-ng-repeat="field in justificationInfo.justifications"">

        <label for="{{field.label}}"><h3>{{field.label}}</h3></label>
        <i class="icon-valid" data-ng-show="subForm.input.$dirty && subForm.input.$valid"></i>
        <i class="icon-invalid" data-ng-show="subForm.input.$dirty && subForm.input.$invalid"></i>
        <textarea placeholder="{{field.placeholder}}" class="form-control" id="{{field.label}}" name="input" type="text" rows="3" data-ng-model="field.value" required>{{field.value}}</textarea>

    </div>

Kredit: http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html

InformationsquelleAutor der Antwort

Suchen über diese Lösungen, die von Al Johri oben ist der nächste, um meine Bedürfnisse, aber seine Richtlinie war ein wenig weniger programmierbare dann wollte ich. Hier ist meine version seiner Lösungen:

angular.module("app", [])
    .directive("dynamicFormName", function() {
        return {
            restrict: "A",
            priority: 0,
            require: ["form"],
            compile: function() {
                return {
                    pre: function preLink(scope, iElement, iAttrs, ctrls) {
                        var name = "field" + scope.$index;

                        if (iAttrs.dnfnNameExpression) {
                            name = scope.$eval(iAttrs.dnfnNameExpression);
                        }

                        var parentForm = iElement.parent().controller("form");
                        if (parentForm) {
                            var formCtrl = ctrls[0];
                            delete parentForm[formCtrl.$name];
                            formCtrl.$name = name;
                            parentForm[formCtrl.$name] = formCtrl;
                        }
                    }
                 }
            }
        };
   });

Dieser Lösung können Sie übergeben Sie einfach einen Namen ein generator-Ausdruck in der Richtlinie und vermeidet die Sperre nach unten, um das Muster der substitution, er war mit.

Hatte ich auch Probleme anfangs mit dieser Lösung, da Sie es nicht zeigen, ein Beispiel für die Verwendung im markup, also hier ist, wie ich es benutzt habe.

<form name="theForm">
    <div ng-repeat="field in fields">
        <input type="number" ng-form name="theInput{{field.id}}" ng-model="field.value" dynamic-form-name dnfn-name-expression="'theInput' + field.id">        
    </div>
</form>

Ich habe eine komplette funktionierende Beispiel auf github.

InformationsquelleAutor der Antwort tomgreen98

Gebäude auf pkozlowski.opensource ist Antwort, ich habe einen Weg zu einer dynamischen input-Namen, die auch die Arbeit mit ngMessages. Hinweis: die ng-init Teil auf die ng-form - element und die Verwendung von furryName. furryName wird die variable name enthält den Wert der Variablen für die input's name Attribut.

<ion-item ng-repeat="animal in creatures track by $index">
<ng-form name="animalsForm" ng-init="furryName = 'furry' + $index">
        <!-- animal is furry toggle buttons -->
        <input id="furryRadio{{$index}}"
               type="radio"
               name="{{furryName}}"
               ng-model="animal.isFurry"
               ng-value="radioBoolValues.boolTrue"
               required
                >
        <label for="furryRadio{{$index}}">Furry</label>

        <input id="hairlessRadio{{$index}}"
               name="{{furryName}}"
               type="radio"
               ng-model="animal.isFurry"
               ng-value="radioBoolValues.boolFalse"
               required
               >
        <label for="hairlessRadio{{$index}}">Hairless</label>

        <div ng-messages="animalsForm[furryName].$error"
             class="form-errors"
             ng-show="animalsForm[furryName].$invalid && sectionForm.$submitted">
            <div ng-messages-include="client/views/partials/form-errors.ng.html"></div>
        </div>
</ng-form>
</ion-item>

InformationsquelleAutor der Antwort ABCD.ca

Ist es möglich, und hier ist, wie ich tun die gleiche Sache mit einer Tabelle der Eingänge.

wickeln Sie die Tabelle in ein Formular, wie so

Dann nutzen Sie einfach dieses

Ich habe ein Formular mit mehreren verschachtelten Richtlinien, die alle enthalten-Eingang(s), select(s), etc...
Diese Elemente sind alle eingeschlossen in ng-wiederholt, und dynamischen string-Werte.

Dies ist, wie die Richtlinie:

<form name="myFormName">
  <nested directives of many levels>
    <your table here>
    <perhaps a td here>
    ex: <input ng-repeat=(index, variable) in variables" type="text"
               my-name="{{ variable.name + '/' + 'myFormName' }}"
               ng-model="variable.name" required />
    ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
                my-name="{{ variable.name + index + '/' + 'myFormName' }}"
        </select>
</form>

Hinweis: Sie können hinzufügen und den index für die string-Verkettung, wenn Sie brauchen, um zu serialisieren vielleicht eine Tabelle der Eingänge; das ist, was ich Tat.

app.directive('myName', function(){

  var myNameError = "myName directive error: "

  return {
    restrict:'A', //Declares an Attributes Directive.
    require: 'ngModel', //ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } //no ngModel exists for this element

      //check myName input for proper formatting ex. something/something
      checkInputFormat(attrs);

      var inputName = attrs.myName.match('^\\w+').pop(); //match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.myName.match('\\w+$').pop(); //match after '/'
      findForm(formName, ngModel, scope);
    } //end link
  } //end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.rsName )){
      throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ //ran out of scope before finding scope[formName]
      throw myNameError + "<Form> element named " + formName + " could not be found."
    }

    if( formName in scope){ //found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) //recursively search through $parent scopes
  }
});

Dieser sollte in der Lage viele Situationen, wo man einfach nicht weiß, wo das Formular sein wird. Oder vielleicht haben Sie geschachtelte Formen, aber aus irgendeinem Grund, die Sie Anhängen möchten diese input name zu beiden Formen? Nun, geben Sie einfach in das Formular Namen, den Sie möchten, fügen Sie die input-Namen.

Was ich wollte, war ein Weg, um dynamische Werte zuweisen, die für die Eingänge, die ich nie wissen wird, und dann rufen Sie $Umfang.myFormName.$gültig.

Können Sie hinzufügen, alles, was Sie sich wünschen: mehr Tabellen, mehr Eingänge, verschachtelte Formulare, was auch immer Sie wollen. Geben Sie einfach den Namen des Formulars, das Sie überprüfen möchten die Eingänge vor. Anschließend auf Formular Absenden zu Fragen, ob die $scope.yourFormName.$gültig

InformationsquelleAutor der Antwort SoEzPz

Hier ein Beispiel, wie ich das mache, ich weiß nicht, ob es die beste Lösung, aber funktioniert perfekt.

Ersten code in HTML.
Suchen Sie bei ng-Klasse, es ist Berufung hasError-Funktion.
Schauen Sie auch auf die Eingabe der Namen-Erklärung. Ich verwende die $ - index zu erstellen, der die verschiedenen input-Namen.

<div data-ng-repeat="tipo in currentObject.Tipo"
    ng-class="{'has-error': hasError(planForm, 'TipoM', 'required', $index) || hasError(planForm, 'TipoM', 'maxlength', $index)}">
    <input ng-model="tipo.Nombre" maxlength="100" required
        name="{{'TipoM' + $index}}"/>

Und nun, hier ist die hasError-Funktion:

$scope.hasError = function (form, elementName, errorType, index) {
           if (form == undefined
               || elementName == undefined
               || errorType == undefined
               || index == undefined)
               return false;

           var element = form[elementName + index];
           return (element != null && element.$error[errorType] && element.$touched);
       };

InformationsquelleAutor der Antwort David Martin

Wenn Ihr mit ng-repeat $index funktioniert wie folgt

  name="QTY{{$index}}"

und

   <td>
       <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-            
        pattern="/^[\d]*\.?[\d]*$/" required/>
        <span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
        <strong>Requires a number.</strong></span>
        <span class="alert-error" ng-show="form['QTY' + $index].$error.required">
       <strong>*Required</strong></span>
    </td>

wir haben zu zeigen, die ng-show, ng-pattern

   <span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
   <span class="alert-error" ng-show="form['QTY' + $index].$error.required">

InformationsquelleAutor der Antwort Kondal