1

AngularJS でのカスタム フォーム コントロールの検証に問題があります。

2 つの問題は次のとおりです。

  1. コンテンツ編集可能フィールド内でプレースホルダー/初期テキストが変更されていない場合に、カスタム エラーをトリガーしたいと考えています。私はさまざまなアプローチを試みましたが、運がありませんでした（編集の試みを含む$isValid）。

  2. 解決済み:、、およびが無効なng-show場合にエラー メッセージを表示するようにトリガーできないようです。(回答: div に名前属性がありませんでした)ng-minlengthng-maxlengthng-required

以下の Plnkr とコード サンプルを参照してください。

https://plnkr.co/edit/Up6Q4D7cMDQQxCodLrpE?p=preview

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-example40-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body ng-app="form-example2">
    <form name="myForm">
        <div contentEditable="true" ng-model="standfirst" title="Click to edit" ng-required="true" ng-minlength="5" ng-maxlength="20">Some People</div>
        <p ng-show="myForm.standfirst.$error.required" class="text-danger">You did not enter a standfirst</p>
        <p ng-show="myForm.standfirst.$error.minlength" class="text-danger">Your standfirst is too short</p>
        <p ng-show="myForm.standfirst.$error.maxlength" class="text-danger">Your standfirst is too long</p>
    </form>
    <pre>model = {{content}}</pre>

    <style type="text/css">
        div[contentEditable] {
            cursor: pointer;
            background-color: #D0D0D0;
        }
    </style>
</body>

</html>

(function(angular) {
    'use strict';
    angular.module('form-example2', []).directive('contenteditable', function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                // view -> model
                elm.on('blur', function() {
                    ctrl.$setViewValue(elm.html());
                });

                // model -> view
                ctrl.$render = function() {
                    elm.html(ctrl.$viewValue);
                };

                // load init value from DOM
                ctrl.$setViewValue(elm.html());
            }
        };
    });
})(window.angular);
4

1 に答える 1