Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:form:attributes [2020/05/29 00:31]
werwolf создано
+++ angular:angularjs:form:attributes [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
 =====Специальные директивы на элементах формы=====
-когда мы хотим использовать disable для элемента в зависимости от условия то мы этого не можем сделать так как функционал этого атрибуте это не предусматривает
+Когда мы хотим использовать disable для элемента в зависимости от условия то мы этого не можем сделать так как функционал этого атрибуте это не предусматривает для этого в AngularJS предусмотрены специальные директивы которые могут применятся в зависимости от условия, эти директивы применимы только как атрибуты.\\
-    для этого в AngularJS предусмотрены специальные директивы которые могут применятся в зависимости от условия, эти директивы применимы только как атрибуты.\\
@@ Строка 106: / Строка 105: @@
 </code>
+====ng-pattern====
+устанавливает регулярное выражение, соответствуя которому данные будут считатся валидными.
+<code html>
+<html ng-app="studyModule">
+<head>
+    <script>
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) {
+            $scope.matchPattern = new RegExp("^[a-z]");
+        });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" ng-controller="studyCtrl">
+        <form name="myForm" novalidate>
+            <div class="panel panel-primary">
+                <div class="panel panel-heading">
+                    <div class="form-group">
+                        <label class="h3">Text:</label>
+                        <input name="sample" class="form-control" ng-model="inputValue"  ng-pattern="matchPattern" />
+                        <!--Обратите внимание что для элементов input у которых атрибут type равен email, url, number
+                не нужно указывать ng-pattern так как angular уже использует его для проверки на валидность содержимое элемента-->
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <p>Pattern Error: {{myForm.sample.$error.pattern}}</p>
+                    <p>Element Valid: {{myForm.sample.$valid}}</p>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>
+====ng-minlength====
+устанавливает минимальное колличество символов для того чтобы данные введенные в элемент считались валидными.
+<code html>
+<html ng-app="studyModule">
+<head>
+    <script>
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) {
+            $scope.requireValue = true;
+            $scope.matchPattern = new RegExp("^[a-z]");
+        });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" ng-controller="studyCtrl">
+        <form name="myForm" novalidate>
+            <div class="panel panel-primary">
+                <div class="panel panel-heading">
+                    <div class="form-group">
+                        <label class="h3">Text:</label>
+                        <input name="sample" class="form-control" ng-model="inputValue" ng-minlength="3" />
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <p>Min Length Error: {{myForm.sample.$error.minlength}}</p>
+                    <p>Element Valid: {{myForm.sample.$valid}}</p>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>
+====ng-maxlength====
+устанавливает максимальное колличество символов для того чтобы данные введенные в элемент считались валидными
+<code html>
+<html ng-app="studyModule">
+<head>
+    <script>
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) {
+            $scope.matchPattern = new RegExp("^[a-z]");
+        });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" ng-controller="studyCtrl">
+        <form name="myForm" novalidate>
+            <div class="panel panel-primary">
+                <div class="panel panel-heading">
+                    <div class="form-group">
+                        <label class="h3">Text:</label>
+                        <input name="sample" class="form-control" ng-model="inputValue" ng-maxlength="10"/>
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p>
+                    <p>Element Valid: {{myForm.sample.$valid}}</p>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>
+====ng-required====
+Устанавливает обязательность введения данных для элемента.
+<code html>
+<html ng-app="studyModule">
+<head>
+    <script>
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) {
+            $scope.requireValue = true;
+        });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" ng-controller="studyCtrl">
+        <form name="myForm" novalidate>
+            <div class="panel panel-primary">
+                <div class="panel panel-heading">
+                    <div class="form-group">
+                        <label class="h3">Text:</label>
+                        <input name="sample" class="form-control" ng-model="inputValue" ng-required="requireValue"/>
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <p>Required Error: {{myForm.sample.$error.required}}</p>
+                    <p>Element Valid: {{myForm.sample.$valid}}</p>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>
+====ng-true-value и ng-false-value====
+  * **ng-true-value** определяет значение которое установится выражением привязки данных когда состояние элемента будет "выбран"
+  * **ng-false-value** определяет значение которое установится выражением привязки данных когда состояние элемента будет "не выбран"
+<code html>
+<html ng-app="studyModule">
+<head>
+    <script>
+        angular.module("studyModule", [])
+        .controller("studyCtrl", function ($scope) { });
+    </script>
+</head>
+<body>
+    <div id="tasksPanel" class="panel" ng-controller="studyCtrl">
+        <form name="myForm" novalidate>
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <div class="checkbox">
+                        <label>
+                            <input name="sample" type="checkbox" ng-model="inputValue" ng-true-value="Checked" ng-false-value="Unchecked" />
+                            Checkbox
+                        </label>
+                        <!--Обратите внимание что для элементов input у которых атрибут type равен email, url, number
+                не нужно указывать ng-pattern так как angular уже использует его для проверки на валидность содержимое элемента-->
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <p>Model Value:{{inputValue}}</p>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы