angularJs之form指令相关注意点

最新推荐文章于 2020-12-29 12:24:36 发布

程序媛~婷

最新推荐文章于 2020-12-29 12:24:36 发布

阅读量371

点赞数

分类专栏： JS Angular 文章标签： form指令

本文链接：https://blog.csdn.net/litingyuki/article/details/83689470

版权

Angular 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

HTML原生的form表单是不能嵌套的，而Angular封装之后的form可以嵌套；
ng 为form扩展了自动校验，防止重复提交等功能；
ng 对input元素的type进行了扩展，一共提供了以下10中类型：text, number, url , email, radio, checkbox, hidden, button, submit, reset
ng 为表单内置了4种CSS样式：ng-valid, ng-invalid, ng-pristine, ng-dirty
内息校验器：require, minlength, maxlenghth

按钮代码：

<!DOCTYPE html>
<html lang="en" ng-app="TestFormModule">
<head>
    <meta charset="UTF-8">
    <title>Ng form表单验证</title>
    <script src="angular.min.js" ></script>
    <script>
        var appModule = angular.module('TestFormModule',[]);
        appModule.controller("TestFormController",function($scope){
            $scope.user = {
                userName :'',
                password :''
            };
            $scope.save = function(){
                alert("保存数据！"+$scope.user.userName+"-"+$scope.user.password);
            }

        });
    </script>


</head>
<body>
    <form name="myForm" ng-submit="save()" ng-controller="TestFormController">
        <input name="userName" type="text" ng-model="user.userName" required/>
        <input name="password" type="password" ng-model="user.password" required/>
        <input type="submit" ng-disabled="myForm.$invalid"/>
    </form>
</body>
</html>

通过添加 ng-disabled="myForm.$invalid"，使提交按钮根据表单的验证状态，检验提交按钮的是否可用状态。

程序媛~婷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs之form指令相关注意点

HTML原生的form表单是不能嵌套的，而Angular封装之后的form可以嵌套； ng 为form扩展了自动校验，防止重复提交等功能； ng 对input元素的type进行了扩展，一共提供了以下10中类型：text, number, url , email, radio, checkbox, hidden, button, submit, reset ng 为表单内置了4种CSS样式：n...
复制链接

扫一扫

专栏目录