`

angularJS 中的逻辑form

阅读更多

 

angularJS中可以针对form表单进行校验,例如

 

<form name="myForm">
    <input type="text" name="name" required/>
    <span ng-show="myForm.name.required">请输入名称</span>
</form>

 

如果有多个区域需要校验,可以使用逻辑指令ng-form

<form submit="save()">
    <div ng-form="form1">
        ...controls...
        <button ng-click="proceed()"
            ng-disabled="form1.$invalid">Proceed</button>
    </div>
    <div ng-form="form2">
        ...controls...
        <button type="submit"
            ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
    </div>
</form>

 

分享到:
评论

相关推荐

    AngularJs demo 例子(表单验证) form

    本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,展示了如何在AngularJS中实现表单验证。 **1. AngularJS 表单基础** 在AngularJS中,表单是由`&lt;form&gt;`标签定义的,可以通过`ngForm`或`...

    AngularJS 中文API参考手册.rar

    9. **表单处理** (Form Handling):AngularJS 提供了内置的表单验证和模型管理功能,简化了用户输入的处理。 10. **Scope**:Scope 是应用中的模型,它是连接控制器和视图的桥梁,具有事件监听和发布的能力。 11. ...

    AngularJS 中文API参考手册

    AngularJS提供了强大的表单处理能力,如`ng-form`指令用于定义表单,`ng-model`用于绑定表单元素到模型,以及`ng-submit`用于捕获表单提交事件。 9. **路由(Routing)** 使用`ngRoute`模块,开发者可以实现SPA的...

    AngularJS Form 进阶:远程校验和自定义输入项

    本篇文章将深入探讨AngularJS中的表单(Form)处理,特别是远程验证和自定义输入项的实现方法。 ### 1. 表单基础 在AngularJS中,表单通过`ng-form`指令进行创建,可以方便地与Angular的数据模型进行双向绑定。每...

    angularJS提交表单(form)

    在AngularJS中,表单(form)的处理和验证是应用程序中的重要部分,尤其是在构建交互式的用户界面时。本文将详细讲解如何在AngularJS中创建和处理表单,以及进行表单验证。 首先,让我们来看一下提供的代码示例。在...

    Angularjs 动态添加表单

    在GitHub上的AngularJS-Adding-form-fields-dynamically-master项目中,你可以找到一个完整的动态添加表单的示例。该项目可能包含以下关键组件: - `index.html`: 主页面,包含`ng-app`定义和`ng-view`指令,用于...

    angularJS技术

    AngularJS的指令系统扩展了HTML,使得可以定义自定义的DOM元素和属性,用于封装复杂的交互逻辑。常见的内置指令如`ng-repeat`用于数据循环,`ng-if`用于条件渲染,`ng-click`处理用户点击事件等。开发者可以通过...

    AngularJS 使用 UI Router 实现表单向导

    在使用UI Router实现表单向导时,你需要在你的AngularJS应用中引入ui.router模块。这通常通过在HTML文件中引用ui-router的JS文件来完成。例如,在index.html中,你会看到类似以下的代码段来引入所需的资源: ```...

    AngularJS表单验证

    首先,AngularJS中的表单是通过`&lt;form&gt;`标签来定义的,这个标签通常会有一个`name`属性,用于在AngularJS的上下文中引用该表单。例如: ```html &lt;form name="myForm"&gt; &lt;!-- 表单元素 --&gt; &lt;/form&gt; ``` 表单内的...

    AngularJS开发指南.pdf

    6. 表单控件(Form Controls):AngularJS提供了一整套用于数据验证的机制,当表单提交之前,可以使用AngularJS内置的验证器来检查用户输入的数据。 7. 服务(Services):AngularJS允许开发者创建可重用的业务逻辑...

    使用angularjs实现浮动表单效果.zip

    2. **编写控制器**:在AngularJS中,我们通过控制器来管理应用的状态和业务逻辑。在本例中,我们将创建一个名为`FormController`的控制器,用于处理表单数据。 ```javascript app.controller('FormController', ...

    AngularJS参考手册

    AngularJS提供了许多全局API,可以帮助开发者更好地管理数据和应用逻辑。 ##### 1. **转换API** - **angular.lowercase()**:将字符串转换为小写。 - **angular.uppercase()**:将字符串转换为大写。 ##### 2. **...

    AngularJs 2 中文权威教程(大部分已翻译),ng-book2中文版

    1. **组件化**:AngularJS 2的核心是组件系统,每个组件都包含了视图和业务逻辑,可以独立地进行复用和组合。组件是构建用户界面的基本单元,通过模板语法定义HTML结构和数据绑定。 2. **依赖注入**:AngularJS 2...

    AngularJS_2 权威教程

    2. **依赖注入**:AngularJS 2中的依赖注入系统更加强大和灵活,使得组件可以轻松获取所需的服务和数据。 3. **TypeScript支持**:AngularJS 2主要用TypeScript编写,这是一种基于JavaScript的静态类型语言,提供了...

    基于angularJS实现的创建自定义表单demo

    在压缩包的文件列表中,“AngularJS-Adding-form-fields-dynamically-master”可能包含了以下文件: 1. `index.html` - 主页文件,包含HTML结构以及AngularJS的绑定和指令。 2. `app.js` - 应用的主JavaScript文件,...

    Angularjs2表单+验证

    在AngularJS2中,表单和验证是构建交互式用户界面的重要组成部分。AngularJS2引入了新的表单处理机制,提供了更加灵活和强大的方式来管理表单数据和验证。以下是关于"AngularJS2表单+验证"的知识点详解: 1. **隐式...

    AngularJS模仿Form表单提交的实现代码

    本文将通过一个具体的实例代码来讲解如何在AngularJS中模仿Form表单提交。 在AngularJS中,我们通常使用$http服务来发送HTTP请求。在处理表单提交时,我们可以使用$http服务的POST方法来模拟表单的提交过程。在给定...

    AngularJs表单校验实例

    在AngularJS中,`&lt;form&gt;`元素被赋予`ng-form`指令,用于创建一个AngularJS管理的表单。每个表单控件(如`&lt;input&gt;`, `&lt;select&gt;`, `&lt;textarea&gt;`等)可以添加`ng-model`指令,将控件的值与AngularJS中的模型对象绑定。 ...

    angularjs制作留言板

    在本文中,我们将深入探讨如何使用AngularJS框架创建一个简单的留言板功能。AngularJS,由Google维护,是一款强大的前端JavaScript框架,用于构建动态Web应用程序。它提供了数据绑定、依赖注入、指令和模块化等功能...

Global site tag (gtag.js) - Google Analytics