必要に応じてhtml要素を定義する入力

私が使用しているアプリケーションでは、日付ピッカーが別のhtmlファイルに定義されています。これは、日付ピッカーの定義です。必要に応じてhtml要素を定義する入力

<span class="input-group"> 
    <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="model" min-date="minimum" 
     is-open="opened" datepicker-options="datepickerOptions" date-disabled="notused" close-text="Close"/> 
    <span class="input-group-btn"> 
    <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
    </span> 
</span>

この日付ピッカーは、アプリケーションのいくつかの場所で使用されます。一部のインスタンスは必須であり、一部は必須ではありません。入力が必須で有効な場合に表示するためのCSSクラスがあります。定義はinputとselectです。これは、CSSクラスです：

input.requiredField.ng-valid { 
    border: 1px solid #449d44; 
    box-shadow: 0px 0px 2px #449d44; 
} 

input.requiredField.ng-invalid { 
    border: 1px solid #A33441; 
    box-shadow: 0px 0px 2px #A33441; 
} 
select.requiredField.ng-invalid { 
    border: 1px solid #A33441; 
    box-shadow: 0px 0px 2px #A33441; 
} 

select.requiredField.ng-valid { 
    border: 1px solid #449d44; 
    box-shadow: 0px 0px 2px #449d44; 
}

私はトラブル日付ピッカーが必要であることを示すために、日付ピッカーにCSSを追加することを持っています。

これは私が使用しています2日付ピッカーです：私は、コントローラにtrueにNG-必要な値を設定し

<div class="row"> 
<div class="col-md-6"> 
    <label id="startDateLabel" style="margin: 25px;">Start Date:</label> 
    <date-picker id="startDatePicker" type="text" model="updateWrhParams.startDate" ng-required="updateWrhParams.startDateRequired" 
style="margin-top: 25px; margin-bottom: 25px; margin-right: 70px; float: right;"> 
</date-picker>  
</div> 
<div class="col-md-6">     
    <label id="endDateLabel" style="margin: 25px;">End Date:</label> 
    <date-picker id="endDatePicker" type="text" model="updateWrhParams.endDate" ng-required="updateWrhParams.endDateRequired" 
style="margin-top: 25px; margin-bottom: 25px; margin-right: 70px; float: right;"> 
</date-picker> 
</div> 
</div> 

<button type="button" id="updateBtnWrh" class="btn btn-success" style="margin-left: 80%; background-color: #41a334;" ng-disabled="updateWarehouseForm.$invalid" ng-click="updateWrh()">Update</button>

：

$scope.updateWrhParams.startDateRequired = true; 
$scope.updateWrhParams.endDateRequired = true;

は、どのように私は日付を定義する追加することができます必要に応じて.cssクラスを持つピッカー？また、入力が空の場合、日付選択ツールは無効ですか？無効な日付を入力すると、ボタンが正しく無効になります。しかし、最初はボタンが有効になっています。

私はangularjs 1.4を使用しています。

出典

2017-04-23 Gloria Santin

あなたはplunkrを作成して問題を表示できますか？それで簡単に解決できます。 – MaheshKumar

plunkrの作成方法は？ –

私は、CSSが正しく読み込まれていると仮定します。すべてあなたのコードでうまくいくようです。これが機能するには、ng-classディレクティブが欠けているだけです。式は、私たちを知ってみましょうtrue

angular.module('myApp', []).controller('MyCtrl', function($scope) { 
 
    $scope.startDateRequired = true; 
 
    $scope.endDateRequired = false; 
 
    $scope.model = {}; 
 
});

input.requiredField.ng-valid { 
 
    border: 1px solid #449d44; 
 
    box-shadow: 0px 0px 2px #449d44; 
 
} 
 

 
input.requiredField.ng-invalid { 
 
    border: 1px solid #A33441; 
 
    box-shadow: 0px 0px 2px #A33441; 
 
} 
 

 
select.requiredField.ng-invalid { 
 
    border: 1px solid #A33441; 
 
    box-shadow: 0px 0px 2px #A33441; 
 
} 
 

 
select.requiredField.ng-valid { 
 
    border: 1px solid #449d44; 
 
    box-shadow: 0px 0px 2px #449d44; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app='myApp'> 
 
    <div ng-controller="MyCtrl"> 
 
<form> 
 
    
 
    <input 
 
    type="text" 
 
    ng-model="model.start" 
 
    class="form-control" ng-required="startDateRequired" 
 
    ng-class="startDateRequired == true ? 'requiredField':''" 
 
    /> 
 
    
 
    <input 
 
    type="text" ng-model="model.end" 
 
    class="form-control" ng-required="endDateRequired" 
 
    ng-class="endDateRequired == true ? 'requiredField':''" 
 
    /> 
 
</form> 
 
    </div> 
 
</body>

ときreference

はこれが必要なクラスを追加します。

出典

2017-04-24 04:30:30 Searching

これはまだ私のhtmlで動作していません。あなたは 'input'要素を使っています。最初のコード表示に示されているように、 'date-picker'指示文を使用する必要があります。私はあなたの提案を日付ピッカーディレクティブと私が日付ピッカーを実装しているページに追加しようとしましたが、それはまだ入力領域の周りに赤いボックスではありません。 –

@ GloriaSantinあなたが使用する/使用する必要のある実際の指令は、 'ngClass'とその使用方法です。 'startDateRequired'という式を評価することによって、ngClassは適切なCSSクラスを追加します。 – Searching

それを説明してくれてありがとう。私は来週早くそれを見る予定です。私はこのプロジェクトをもう一度やり遂げました。 –

必要に応じてhtml要素を定義する入力

答えて

関連する問題