Jak sprawdzać poprawność pól formularzy dynamicznych w dyrektywie kątowej?

Chciałbym utworzyć formularz z polami utworzonymi w dyrektywie. Powiązanie danych działa poprawnie, ale sprawdzanie poprawności nie działa.Jak sprawdzać poprawność pól formularzy dynamicznych w dyrektywie kątowej?

to html:

<body ng-controller="MainCtrl"> 
    <h1>form</h1> 
    <form name="form"> 
     <div ng-repeat="conf in config"> 
      <div field data="data" conf="conf"></div> 
     </div> 
    </form> 
    <pre>{{data|json}}</pre> 
</body>

kontroler i pole dyrektywy:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = {name: '', age: ''} 
    $scope.config = [ 
     {field: 'name', required:true}, 
     {field: 'age'} 
    ]; 
}); 

app.directive('field', function ($compile) { 
    return { 
     scope: { 
      data: '=', 
      conf: '=' 
     }, 
     link: function linkFn(scope, element, attrs) { 
      // field container 
      var row = angular.element('<div></div>'); 

      // label 
      row.append(scope.conf.field + ': '); 

      // field input 
      var field = angular.element('<input type="text" />'); 
      field.attr('name', scope.conf.field); 
      field.attr('ng-model', 'data.' + scope.conf.field); 
      if (scope.conf.required) { 
       field.attr('required', 'required'); 
      } 
      row.append(field); 

      // validation 
      if (scope.conf.required) { 
       var required = angular.element('<span>required</span>'); 
       required.attr('ng-show', 
        'form.' + scope.conf.field + '.$error.required'); 
       row.append(required); 
      } 

      $compile(row)(scope); 
      element.append(row); 
     } 
    } 
});

problemem jest to, że sprawdzanie poprawności dla pola name nie działa, a tekst walidacja required nigdy nie jest pokazany. Może być form w jest nieznany w dyrektywie. Ale nie wiem, jak przekazać formularz do dyrektywy terenowej. Czy możesz mi pomóc, jak to naprawić? Dzięki.

tutaj jest kod na żywo: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

Źródło

2013-05-03 MarekLi

ja walczących z tym samym problemem. Znalazłem nieudokumentowaną funkcję w kanciastym źródle: 'FormController' ma metody' $ addControl' i '$ removeControl'. Zastanawiam się nad wykorzystaniem tych metod do dynamicznego dodawania kontroli do rodzica 'FormController' z dyrektywy. Powiadomię Cię, jeśli się uda. –

Musisz użyć ng-form directive i pchnąć dynamiczne pole bezpośrednio do formy obiektu.

Ten wątek może pomóc: https://github.com/angular/angular.js/issues/1404

Źródło

2013-07-23 14:12:39

Todo:

przed:

$compile(row)(scope); 
element.append(row);

po:

element.append(row); 
$compile(row)(scope);

p/s w 'planker' dla obiektów dodać CSS:

.ng-invalid { 
    border: 1px solid red; 
}

Źródło

2013-12-10 12:47:22 Vladimir

Chociaż jest to bardzo niejasne, jest to w rzeczywistości odpowiedź. Powinny być akceptowane JAK NAJSZYBCIEJ – incarnate

Oto plunker rozwidlony od Ciebie, aby rozwiązać problem: jesteś http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

Podsumowując, dodałem obejrzyj, który przełączy komunikat o błędzie zamiast korzystać z dyrektywy ng-show. Rzeczy mogą się włochate, gdy spróbujesz dynamicznie dodać dyrektywę w linku do dyrektywy. W przypadku prostego użycia, jest to szybsze, aby dodać własny zegarek.

Można również spojrzeć na niniejszej dyrektywy, która została skonfigurowana do obsługi wielu przypadków użycia do walidacji, a także pozwala na tworzenie niestandardowych walidacji łatwo https://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) { 
    if(invalid === true) { 
     addRequiredErrorMessage(); 
    } else { 
     removeRequiredErrorMessage(); 
    } 
}; 
scope.$watch(watchIfRequired, toggleRequiredErrorMessage);

Źródło

2014-06-23 17:08:53 nelsonomuto

Jak sprawdzać poprawność pól formularzy dynamicznych w dyrektywie kątowej?

Odpowiedz

Powiązane problemy