วิธีการตรวจสอบอินพุตที่สร้างขึ้นแบบไดนามิกโดยใช้ ng-repeat, ng-show (เชิงมุม)

ฉันมีตารางที่สร้างขึ้นโดยใช้ ng-repeat ฉันต้องการเพิ่มการตรวจสอบความถูกต้องของแต่ละองค์ประกอบในตาราง ปัญหาคือแต่ละอินพุตเซลล์มีชื่อเดียวกันกับเซลล์ด้านบนและด้านล่าง ฉันพยายามใช้{{$index}}ค่าเพื่อตั้งชื่ออินพุต แต่แม้ว่าตัวอักษรสตริงใน HTML จะปรากฏอย่างถูกต้อง แต่ตอนนี้ก็ใช้งานได้แล้ว

นี่คือรหัสของฉัน ณ ตอนนี้:

<tr ng-repeat="r in model.BSM ">
   <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>
</tr>

ฉันได้ลองลบออก{{}}จากดัชนี แต่ไม่ได้ผล ณ ตอนนี้คุณสมบัติการตรวจสอบของอินพุตทำงานอย่างถูกต้อง แต่ข้อความแสดงข้อผิดพลาดไม่ปรากฏขึ้น

ใครมีข้อเสนอแนะ?

แก้ไข:นอกเหนือจากคำตอบที่ดีด้านล่างนี่คือบทความบล็อกที่ครอบคลุมปัญหานี้ในรายละเอียดเพิ่มเติม: http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /

AngularJS อาศัยชื่ออินพุตเพื่อแสดงข้อผิดพลาดในการตรวจสอบความถูกต้อง

น่าเสียดายที่ ณ วันนี้มันเป็นไปไม่ได้ (โดยไม่ต้องใช้คำสั่งกำหนดเอง) เพื่อสร้างชื่อของอินพุต อันที่จริงการตรวจสอบเอกสารป้อนเข้าเราจะเห็นว่าแอตทริบิวต์ name ยอมรับสตริงเท่านั้น

ในการแก้ปัญหา 'ชื่อไดนามิก' คุณต้องสร้างฟอร์มภายใน (ดูng-form ) :

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
      </ng-form>
  </div>

อีกทางเลือกหนึ่งคือการเขียนคำสั่งที่กำหนดเองสำหรับเรื่องนี้

นี่คือ jsFiddle ที่แสดงการใช้ ngForm: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

เนื่องจากคำถามถูกถามทีมงาน Angular ได้แก้ไขปัญหานี้โดยทำให้สามารถสร้างชื่ออินพุตแบบไดนามิกได้

ด้วยAngular เวอร์ชัน 1.3 และใหม่กว่าคุณสามารถทำสิ่งนี้ได้แล้ว:

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

การสาธิต

Angular 1.3 ยังแนะนำ ngMessages ซึ่งเป็นเครื่องมือที่มีประสิทธิภาพยิ่งขึ้นสำหรับการตรวจสอบความถูกต้องของแบบฟอร์ม คุณสามารถใช้เทคนิคเดียวกันกับ 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>

หากคุณไม่ต้องการใช้รูปแบบ ng คุณสามารถใช้คำสั่งที่กำหนดเองที่จะเปลี่ยนแอตทริบิวต์ชื่อของแบบฟอร์ม วางคำสั่งนี้เป็นแอตทริบิวต์ในองค์ประกอบเดียวกับ ng-model ของคุณ

หากคุณกำลังใช้คำสั่งอื่นร่วมโปรดระวังว่าพวกเขาไม่มีชุดคุณสมบัติ "เทอร์มินัล" มิฉะนั้นฟังก์ชันนี้จะไม่สามารถทำงานได้ (เนื่องจากมีลำดับความสำคัญเป็น -1)

ตัวอย่างเช่นเมื่อใช้คำสั่งนี้ด้วย ng-options คุณต้องเรียกใช้งานลิงไลน์หนึ่งบรรทัดนี้: https://github.com/AlJohri/bower-angular/commit/eb17a967b7973eb7fc1124b024aa8b3ca540a155

angular.module('app').directive('fieldNameHack', function() {
    return {
      restrict: 'A',
      priority: -1,
      require: ['ngModel'],
      // the ngModelDirective has a priority of 0.
      // priority is run in reverse order for postLink functions.
      link: function (scope, iElement, iAttrs, ctrls) {

        var name = iElement[0].name;
        name = name.replace(/\{\{\$index\}\}/g, scope.$index);

        var modelCtrl = ctrls[0];
        modelCtrl.$name = name;

      }
    };
});

ฉันมักจะพบว่ามีประโยชน์ในการใช้ ng-init เพื่อตั้งค่า $ index เป็นชื่อตัวแปร ตัวอย่างเช่น:

<fieldset class='inputs' ng-repeat="question questions" ng-init="qIndex = $index">

สิ่งนี้จะเปลี่ยนนิพจน์ปกติของคุณเป็น:

name = name.replace(/\{\{qIndex\}\}/g, scope.qIndex);

หากคุณมีหลายระดับซ้อนกันซ้ำคุณสามารถใช้ชื่อตัวแปรเหล่านี้แทน $ parent ดัชนี $

คำจำกัดความของ "terminal" และ "priority" สำหรับคำสั่ง: https://docs.angularjs.org/api/ng/service/ $ รวบรวม # directive-definition-object

ความคิดเห็นเกี่ยวกับ Github ความต้องการ ng-option monkeypatch: https://github.com/angular/angular.js/commit/9ee2cdff44e7d496774b340de816344126c457b3#commitcomment-6832095 https://twitter.com/aljohri/status/48296354143

UPDATE:

คุณยังสามารถทำให้งานนี้มีรูปแบบ ng

angular.module('app').directive('formNameHack', function() {
    return {
      restrict: 'A',
      priority: 0,
      require: ['form'],
      compile: function() {
        return {
          pre: function(scope, iElement, iAttrs, ctrls) {
            var parentForm = $(iElement).parent().controller('form');
            if (parentForm) {
                var formCtrl = ctrls[0];
                delete parentForm[formCtrl.$name];
                formCtrl.$name = formCtrl.$name.replace(/\{\{\$index\}\}/g, scope.$index);
                parentForm[formCtrl.$name] = formCtrl;
            }
          }
        }
      }
    };
});

ใช้คำสั่ง ng-form ภายในแท็กที่คุณใช้คำสั่ง ng-repeat จากนั้นคุณสามารถใช้ขอบเขตที่สร้างขึ้นโดยคำสั่ง ng-form เพื่ออ้างอิงชื่อสามัญ ตัวอย่างเช่น:

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

เครดิตไปที่: http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html

เพิ่มตัวอย่างที่ซับซ้อนมากขึ้นด้วย "การตรวจสอบความถูกต้องที่กำหนดเอง" ที่ด้านข้างของคอนโทรลเลอร์http://jsfiddle.net/82PX4/3/

<div class='line' ng-repeat='line in ranges' ng-form='lineForm'>
    low: <input type='text' 
                name='low'
                ng-pattern='/^\d+$/' 
                ng-change="lowChanged(this, $index)" ng-model='line.low' />
    up: <input type='text' 
                name='up'
                ng-pattern='/^\d+$/'
                ng-change="upChanged(this, $index)" 
                ng-model='line.up' />
    <a href ng-if='!$first' ng-click='removeRange($index)'>Delete</a>
    <div class='error' ng-show='lineForm.$error.pattern'>
        Must be a number.
    </div>
    <div class='error' ng-show='lineForm.$error.range'>
        Low must be less the Up.
    </div>
</div>

การมองหาวิธีแก้ไขปัญหาเหล่านี้สิ่งที่ Al Johri ให้ไว้ข้างต้นนั้นใกล้เคียงกับความต้องการของฉันมากที่สุด แต่คำสั่งของเขาเป็นโปรแกรมที่น้อยกว่าฉันจึงต้องการ นี่คือโซลูชันของเขาในแบบของฉัน:

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

โซลูชันนี้ช่วยให้คุณสามารถส่งนิพจน์ตัวสร้างชื่อไปยังคำสั่งและหลีกเลี่ยงการล็อกลงเพื่อทดแทนรูปแบบที่เขาใช้

ฉันยังมีปัญหาในตอนแรกกับวิธีแก้ปัญหานี้เนื่องจากมันไม่ได้แสดงตัวอย่างการใช้ในมาร์กอัปดังนั้นนี่คือวิธีที่ฉันใช้

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

ผมมีตัวอย่างการทำงานที่สมบูรณ์มากขึ้นบนGitHub

การตรวจสอบใช้งานได้กับ ng repeat หากฉันใช้ไวยากรณ์ต่อไปนี้scope.step3Form['item[107][quantity]'].$touched ฉันไม่ทราบว่าเป็นวิธีปฏิบัติที่ดีที่สุดหรือเป็นทางออกที่ดีที่สุด แต่ก็ใช้งานได้

<tr ng-repeat="item in items">
   <td>
        <div class="form-group">
            <input type="text" ng-model="item.quantity" name="item[<% item.id%>][quantity]" required="" class="form-control" placeholder = "# of Units" />
            <span ng-show="step3Form.$submitted || step3Form['item[<% item.id %>][quantity]'].$touched">
                <span class="help-block" ng-show="step3Form['item[<% item.id %>][quantity]'].$error.required"> # of Units is required.</span>
            </span>
        </div>
    </td>
</tr>

จากคำตอบของ pkozlowski.opensource ฉันได้เพิ่มวิธีที่จะมีชื่ออินพุตแบบไดนามิกที่ทำงานกับngMessagesได้ หมายเหตุng-initส่วนหนึ่งในองค์ประกอบและการใช้ng-form กลายเป็นชื่อตัวแปรที่มีค่าตัวแปรสำหรับ's แอตทริบิวต์furryNamefurryNameinputname

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

มันสายเกินไป แต่อาจช่วยได้บ้าง

1. สร้างชื่อเฉพาะสำหรับทุกการควบคุม
2. ตรวจสอบโดยใช้ fromname[uniquname].$error

รหัสตัวอย่าง:

<input 
    ng-model="r.QTY" 
    class="span1" 
    name="QTY{{$index}}" 
    ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<div ng-messages="formName['QTY' +$index].$error"
     ng-show="formName['QTY' +$index].$dirty || formName.$submitted">
   <div ng-message="required" class='error'>Required</div>
   <div ng-message="pattern" class='error'>Invalid Pattern</div>
</div>

ดูตัวอย่างการทำงานที่นี่

หากคุณใช้ดัชนี $ ng-repeat $ ทำงานเช่นนี้

  name="QTY{{$index}}"

และ

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

เราต้องแสดง 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">

เป็นไปได้และนี่คือวิธีที่ฉันทำสิ่งเดียวกันกับตารางอินพุต

ห่อตารางในรูปแบบเช่นนั้น

จากนั้นใช้สิ่งนี้

ฉันมีรูปแบบที่มีคำสั่งหลายซ้อนที่ทั้งหมดประกอบด้วยอินพุต (s) เลือก (s), ฯลฯ ... องค์ประกอบเหล่านี้ทั้งหมดอยู่ใน ng-repeats และค่าสตริงแบบไดนามิก

นี่คือวิธีใช้คำสั่ง:

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

หมายเหตุ: คุณสามารถเพิ่มและจัดทำดัชนีการเรียงสตริงได้หากคุณต้องการซีเรียลไลซ์อนุกรมของอินพุต ซึ่งเป็นสิ่งที่ฉันทำ

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

สิ่งนี้ควรจัดการกับหลาย ๆ สถานการณ์ที่คุณไม่รู้ว่าจะอยู่ที่ไหนแบบฟอร์ม หรือบางทีคุณมีฟอร์มซ้อนกัน แต่ด้วยเหตุผลบางอย่างที่คุณต้องการแนบชื่ออินพุตนี้กับสองฟอร์มขึ้น เพียงแค่ส่งชื่อแบบฟอร์มที่คุณต้องการแนบชื่ออินพุต

สิ่งที่ฉันต้องการคือวิธีการกำหนดค่าแบบไดนามิกให้กับอินพุตที่ฉันจะไม่มีทางรู้และเพียงแค่เรียก $ scope.myFormName. $ ถูกต้อง

คุณสามารถเพิ่มสิ่งอื่น ๆ ที่คุณต้องการได้: เพิ่มตารางแบบฟอร์มให้มากขึ้น, แบบฟอร์มซ้อนกัน, ทุกอย่างที่คุณต้องการ เพียงส่งชื่อแบบฟอร์มที่คุณต้องการตรวจสอบความถูกต้องของอินพุต จากนั้นในแบบฟอร์มการส่งถามว่า $ scope.yourFormName ของคุณ $ ถูกต้อง

สิ่งนี้จะได้รับชื่อใน ng-repeat เพื่อแยกส่วนในการตรวจสอบความถูกต้องของแบบฟอร์ม

<td>
    <input ng-model="r.QTY" class="span1" name="{{'QTY' + $index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
</td>

แต่ฉันมีปัญหาในการค้นหาข้อความการตรวจสอบดังนั้นฉันจึงต้องใช้ ng-init เพื่อให้มันแก้ไขตัวแปรเป็นคีย์วัตถุ

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

นี่คือตัวอย่างของวิธีการที่ฉันทำฉันไม่รู้ว่ามันเป็นทางออกที่ดีที่สุด แต่ทำงานได้อย่างสมบูรณ์

ก่อนรหัสใน HTML ดู ng-class มันกำลังเรียกฟังก์ชั่น hasError ดูการประกาศชื่อของอินพุตด้วย ฉันใช้ดัชนี $ เพื่อสร้างชื่ออินพุตที่แตกต่างกัน

<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}}"/>

และตอนนี้นี่คือฟังก์ชัน hasError:

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

ความต้องการของฉันแตกต่างจากที่ถามในคำถามเดิมเล็กน้อย แต่หวังว่าฉันจะช่วยคนที่ประสบปัญหาเดียวกันกับที่ฉันเป็น ..

ฉันต้องกำหนดว่าจำเป็นต้องใช้เขตข้อมูลหรือไม่ขึ้นอยู่กับตัวแปรขอบเขต .. ดังนั้นโดยทั่วไปฉันต้องตั้งค่าng-required="myScopeVariable"(ซึ่งเป็นตัวแปรบูลีน)

<div class="align-left" ng-repeat="schema in schemas">
    <input type="text" ng-required="schema.Required" />
</div>