AngularJSフォームの検証 - formName。$ validは常にtrue

私はフィールドがfieldというディレクティブによって動的に生成される単純なフォームを持っています。私が提出すると、フィールドが検証され、ng-invalid、ng-invalid-emailなどの有効なクラス名が生成されます。しかし、フォームのクラス名は常にng-validです。どんな助けでも大歓迎です！

Plnkr

HTML

<body ng-controller="app_controller"> 
    <form name="register" ng-submit="register_user()" novalidate> 
     <table> 
     <tr> 
      <td>Username: </td> 
      <td><field name="username" value="info"></field></td> 
     </tr> 
     <tr> 
      <td>Email: </td> 
      <td><field name="email" value="info"></field></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><input type="submit" value="submit" ng-disabled="register.$invalid" /></td> 
     </tr> 
     </table> 

     Invalid: {{ register.$invalid }} <br /> 
     valid: {{ register.$valid }} 
    </form>

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

app.controller('app_controller', function($rootScope, $scope) { 
    $scope.info = { 
    username: '', 
    email: '' 
    }; 

    $rootScope.meta = { 
    "username": { 
     type: "STRING", 
     length: 255 
    }, 
    "email": { 
     type: "EMAIL", 
     length: 255 
    } 
    }; 
}); 

app.directive('field', function($rootScope, $compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     value: '=' 
    }, 
    link: function($scope, $element, $attrs) { 
     $scope.field_name = $attrs.name; 
     $scope.required = true; 
     console.log($scope); 
     var prepare_fields = function() { 
     if ($rootScope.meta) { 
      $scope.field = angular.copy($rootScope.meta[$attrs.name]); 
     } 

     var html = ''; 
     if ($scope.field.type === "STRING") { 
      html = '<input type="text" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" />'; 
     } else if ($scope.field.type === "EMAIL") { 
      html = '<input type="email" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" />'; 
     } 

     $element.html($compile(html)($scope)); 
     }; 

     $rootScope.$watch('meta', prepare_fields); 
    } 
    } 
});

出典

2016-09-26 moustacheman

ので、ちょうど怒鳴るの2行を追加します。追加されたコンテンツの後element.contentsをコンパイル

ディレクティブで:)

ので、最終的なコードを作業しなければならない代わりに

$element.html($compile(html)($scope));

の

$element.html(html); 
$compile($element.contents())($scope);

：

var html = ''; 
if ($scope.field.type === "STRING") { 
    html = '<input type="text" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" />'; 
} else if ($scope.field.type === "EMAIL") { 
    html = '<input type="email" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" />'; 
} 

// $element.html($compile(html)($scope)); 
$element.html(html); 
$compile($element.contents())($scope);

はNB：問題は、あなたが文字列ではなくコンパイルされました要素html。コンパイル時に要素の内容を変更した後で、の要素を修正しています。

出典

2016-09-26 12:37:56

恐ろしい！私は完全にその部分を逃した:) – moustacheman

AngularJSフォームの検証 - formName。$ validは常にtrue

答えて

関連する問題