5

AngularStrap の datetimepicker を検証できましたが、必須の検証の失敗と無効な日付の失敗を区別できません。画面に表示される唯一のエラーは、必要なエラーか無効な文字列かに関係なく、必要なエラーです。無効な文字列が入力された場合に、別の検証メッセージを表示することは可能ですか? これが私のコードです:

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
    <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
    <div class="controls">
        <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
        <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
        <!--<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>-->
    </div>
</div>

私が欲しいのは、ng-pattern チェックに似ていますが、datetimepicker に固有のものです。

4

3 に答える 3

9

まず第一に、これには日付ピッカーとの実際のリンクがないかどうか、私があなたの問題を理解していれば、フォームの $invalid につながるエラーに従ってさまざまなメッセージを表示しようとしていると思います

その場合、提供したコードは、日付が無効な場合にのみメッセージを表示します（ただし、パターンの部分にコメントしたためです;））

テスト中は非常に怠惰だったので、日付ピッカーは使用しませんでした。日付を手動で入力する必要がありますが、このフィドルを実行しました: http://jsfiddle.net/DotDotDot/ELf5A/2/

どのようなコンテキストで使用しているのか正確にはわからなかったので、さまざまな方法を使用して検証エラー メッセージを表示しました。

HTML部分はシンプルです。フォームがあり、2 つのフィールドが必要です。1 つは日付のパターン チェックがあり、もう 1 つは必須の検証のみです。日付に 2 つのエラー メッセージを追加しました。1 つはフォームに触れていないときに表示され、期待される形式を示し、もう 1 つはパターンが間違っている場合にのみ表示されます。

ボタンをクリックして検証全体を確認し、別のメッセージを表示して、フォームが有効かどうか、有効でない場合は日付のパターンが原因であるかどうかを確認できます。

    <div ng-controller='theCtrl'>
<form name='theForm'>
    Enter something here : <input type='text' ng-model='someField' name='someField' required />  <br/>
Enter a date here : <input type='text' ng-model='theDate' name='theDate' ng-pattern='datePattern' required />
    <span ng-show='theForm.theDate.$error.pattern'>Your date format is invalid, please check it again</span>
    <span ng-show='theForm.theDate.$pristine'>Enter a valid date here : DD/MM/YYYY</span>
    <br/> <input type='button' ng-click='validation(theForm)' value='Try to validate me!' />
    <br /> {{errorMsg}}
</form>
</div>

JS 部分もそれほど複雑ではありません。ボタンをクリックすると、フォームが検証機能に送信され、実際に必要なすべてのチェックが行われます。パターンに対応するものだけを実行しましたが、検証について必要なものはすべてチェックできます

    $scope.validation=function(aForm){
    //console.log(aForm)
        if(aForm.theDate.$error.pattern)
             $scope.errorMsg='The pattern you entered isn\'t good enough, try again !'
        else{
            if(aForm.$invalid)
                 $scope.errorMsg='Something is invalid, please check all the fields !'
            else//valid
            {
                $scope.errorMsg='Not bad !'
                alert("good job !")
                //maybe you can also submit this form here ;) 
            }
        }
}

この検証関数は、ng-show/ng-hide のトリガーとしても完全に使用できます。これが、別の関数も追加した理由です。

    $scope.whatToDisplay=function(aForm){
    if(aForm.$valid)
        return 'valid';
    if(aForm.theDate.$error.pattern)
        return 'date';
    if (aForm.$invalid)
       return 'notdate';
}

これは、検証中に何が起こっているかに対応する文字列を返します。これは ng-show で処理されます。

<span ng-show='whatToDisplay(theForm)=="date"'>Displayed if the date is wrong</span>
<span ng-show='whatToDisplay(theForm)=="notdate"'>This is displayed if the form is invalid, but not because of the date format</span>
<span ng-show='whatToDisplay(theForm)=="valid"'>Displayed if the form is valid</span>

少し要約すると、4つの異なる方法を使用できます

  • 私のフィドルの validation() 関数に対応する、クリックでトリガーされる検証関数 (送信ボタンに役立ちます)

  • whatToDisplay() 関数のように、すべての変更を自動的に監視するいくつかの ng-show に関連付けられた関数

  • コードで行っていたことなど、フォーム属性のみに関連付けられた ng-show

  • クラスは自動的にフォームに適用されます（説明はしませんでしたが、フィドルで確認できます。パターンが間違っているか、無効な場合のみ境界線が変更されます）

申し訳ありませんが、これを短くするのに苦労しました。コードで遊んでみましょう。その方が理解しやすいです。これが役に立てば幸いです。

于 2013-07-27T14:54:15.040 に答える
2

AngularJS 1.3 で ngMessages を使用して、少ないコードと複雑さでエラー メッセージを送信する必要があります。このbs-angularディレクティブは、メッセージ リスト内の「日付」文字列値のメッセージを作成しng-messageます。

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
    <label class="control-label" for="BirthDate">
         {{'_BirthDate_' | i18n}}
    </label>
    <div class="controls">
        <input id="BirthDate" name="BirthDate" title="BirthDate" type="text"
          ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" 
          bs-datepicker required>
        <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>            
    </div>
    <div class='alert alert-danger' ng-messages='myForm.BirthDate.$error' 
            ng-if='!myForm.BirthDate.$valid'>
      <div ng-message="date">Please enter a valid date</div>
      <div ng-message="required">Birthdate is required</div>
    </div> 
</div>
于 2015-08-10T21:05:16.413 に答える
0

このコードは、無効な日時エラー メッセージを表示するのに役立ちます

$scope.date=='Invalid Date'
{
   err('Your error message');
}
于 2015-06-09T06:30:40.900 に答える