カスタムディレクティブでフォームに必要なフィールドを動的に設定する

まずはAngularの新機能です。 HTMLのフォームグループdivで使用されているディレクティブを作成しました。これには必要な入力が含まれています。このディレクティブの理想は、div全体がスコープ値に基づいて表示されるかどうかをチェックすることです。カスタムディレクティブでフォームに必要なフィールドを動的に設定する

視覚的に、この値がfalseにNG-IFディレクティブを設定するときに、フォームが「doesnの際に必要な値がが欠落しているとして、フォームの送信はまだエラーを与える期待通りに動作しますが、...もはやその入力を含んでいません。

これは私のコードです：

// My Directive app.directive("showCountry", function ($compile) { var linkFunction = function (scope, element, attributes) { var testingVariable = scope.testingVariable; if (testingVariable) { switch (testingVariable.toLowerCase()) { case "A": // Do nothing, keep the div visible. break; default: // Hide the entire div. attributes.$set("ngIf", false); \t \t \t \t \t compile(element)(scope); break; } } }; return { restrict: "A", link: linkFunction }; });

 <div class="form-group" show-country> \t <label class="col-lg-6 col-md-6 control-label"> \t \t Country \t </label> \t <div class="col-lg-6 col-md-6"> \t \t <input name="country" type="text" placeholder="Country" ng-model="country" ng-required="true"/> \t </div> </div>

は君たちをありがとうございます。

出典

2017-05-15 Ricardo Racciore

スコープに変数validateを取り状態で、それは偽作る、

if (testingVariable.toLowerCase()) { 
    switch (testingVariable.toLowerCase()) { 
     case "A": 
      // Do nothing, keep the div visible. 
      break; 
     default: 
      // Hide the entire div. 
      scope.validate = false; 
      attributes.$set("ngIf", false);    
         $compile(element)(scope); 
      break; 
    } 
}

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="test"> 
 
<form name="myForm"> 
 
The country input is hided and animation wil not occur 
 
<div class="form-group" show-country validate="validate"> 
 
\t <label class="col-lg-6 col-md-6 control-label"> 
 
\t \t Country 
 
\t </label> 
 
\t <div class="col-lg-6 col-md-6"> 
 
\t \t <input name="country" type="text" placeholder="Country" ng-model="country" ng-required="true" ng-if="validate"/> 
 
\t </div> 
 
</div> 
 
</form> 
 
<h1>{{myForm.country.$error}} 
 
<script> 
 
var app = angular.module("myApp", []); 
 
app.directive("showCountry", function ($compile) { 
 

 
    var linkFunction = function (scope, element, attributes) { 
 

 
     var testingVariable = scope.testingVariable; 
 
\t \t console.log(testingVariable.toLowerCase()) 
 
     if (testingVariable.toLowerCase()) { 
 
      switch (testingVariable.toLowerCase()) { 
 
       case "A": 
 
        // Do nothing, keep the div visible. 
 
        break; 
 
       default: 
 
        // Hide the entire div. 
 
        scope.validate = false; 
 
        attributes.$set("ngIf", false);    
 
\t \t \t \t \t   $compile(element)(scope); 
 
        break; 
 
      } 
 
     } 
 
    }; 
 

 
    return { 
 
     restrict: "A", 
 
     link: linkFunction 
 
    }; 
 
}); 
 
app.controller("test", function ($scope) { 
 
    $scope.testingVariable = 'false'; 
 

 
}); 
 

 
</script> 
 

 
</body> 
 
</html>

Here is the DEMO with validation Occuring, Your scenario

DEMO with novalidation, Required answer

出典

2017-05-15 10:37:25 Sravan

は、ご返信いただきありがとうございます。必要なフィールドが複数ある場合はどうなりますか？別の検証変数の作成を避けるために私は何ができますか？ –

同じ条件の異なるフィールドで同じ変数を使用することができます。 Howzあなたのシナリオ？ – Sravan

私はこのコードを持っていますが、2つの必須フィールドがあります。同じ変数を使用すると、入力の1つが表示されません。 –

カスタムディレクティブでフォームに必要なフィールドを動的に設定する

答えて

関連する問題