首页

互助圈

新手教程

算法原理

架构设计

JAVA进阶

C/C++进阶

Python进阶

JavaScript

数据库

大数据

消息服务

JAVA源码

Spring源码

数据库

消息服务

Dubbo源码

大厂专栏

面试技巧

面试经验

面试题库

文档资料

工具软件

电子书籍

小牛导航

在线工具

登录

简介

License

Why Angular?

为什么不是ReactYz

聊聊技术选型-Angular vs VueYz

状态管理

ES6和TypeScript的特点

ES6和TypeScript的特点 - ES6

ES6 - Classes

ES6 - 回顾this

ES6 - 箭头函数

ES6 - 模板字符串

ES6 - 继承

ES6 - 委托

ES6 - 常量和块作用域变量

ES6 - 扩展语句和剩余参数

ES6 - 解构

ES6 - 模块

ES6和TypeScript的特点 - TypeScript

TypeScript - TypeScript入门

TypeScript - 使用 tsc

TypeScript - Linting

TypeScript - 类型Yz

TypeScript - TypeScript特性

TypeScript - TypeScript类

TypeScript - 泛型Yz

TypeScript - 接口

TypeScript - Shapes

TypeScript - 类型推断

TypeScript - 类型关键字

TypeScript - 装饰器

TypeScript - 属性装饰器

TypeScript - 类装饰器

TypeScript - 参数装饰器

JavaScript工具链

JavaScript工具链 - 源码控制：Git

JavaScript工具链 - 命令行

JavaScript工具链 - JavaScript命令行：NodeJS

JavaScript工具链 - 后端代码共享和分发：npm

JavaScript工具链 - 模块加载，打包和构建任务：Webpack

JavaScript工具链 - Chrome

引导Angular应用

引导Angular应用 - 了解文件结构

引导Angular应用 - 引导Providers

Angular 中的组件

Angular 中的组件 - 创建组件

Angular 中的组件 - 组件的应用程序结构

组件的应用程序结构 - 将数据传递到组件

组件的应用程序结构 - 响应组件事件

组件的应用程序结构 - 使用双向数据绑定

组件的应用程序结构 - 从模板访问子组件

Angular 中的组件 - 投影

Angular 中的组件 - 使用组件构建应用程序

Angular 中的组件 - 使用其他组件

指令

指令 - 属性指令

属性指令 - NgStyle指令

属性指令 - NgClass指令

指令 - 结构指令

结构指令 - NgIf指令

结构指令 - NgFor指令

结构指令 - NgSwitch指令

结构指令 - 使用多个结构指令

高级组件

高级组件 - 组件生命周期

高级组件 - 其他组件交互方式

高级组件 - 视图封装

高级组件 - ElementRef

Observable

Observable - 使用Observable

Observable - 错误处理

Observable - 处理订阅和释放资源

Observable - Observable VS Promise

Observable - 使用其他来源的Observable

Observable - 可观察数组操作

Observable - “冷” vs “热” Observable

Observable - 总结

Angular 依赖注入

Angular 依赖注入 - 什么是DI？

Angular 依赖注入 - DI框架

Angular 依赖注入 - Angular 的DI

Angular 的DI - @Inject() 和 @Injectable

Angular 的DI - 类以外的注入

Angular 的DI - 避免注入冲突: OpaqueToken

Angular 的DI - 注入树

HTTP

HTTP - 发起请求

HTTP - 捕获异常

捕获异常 - 捕获和释放

捕获异常 - 取消请求

捕获异常 - 重试

HTTP - 拦截请求

HTTP - 进度事件

变化检测

变化检测 - Angularjs与Angular的变化检测策略

变化检测 - 变化检测如何工作

变化检测 - 更改检测器类

变化检测 - 变更检测策略：OnPush

变化检测 - 强制不变性

变化检测 - 其他资源

Zone.js

Zone.js - 概述

Zone.js - Zone 传播

Zone 传播 - 跟踪异步操作

Zone 传播 - 异步操作补丁

Zone.js - 上下文环境

Zone.js - 拦截

Angular 进阶

Angular 进阶 - 指令

指令 - 创建属性指令

创建属性指令 - 监听Host元素

创建属性指令 - 在指令中设置属性

指令 - 创建结构指令

创建结构指令 - 查看容器和嵌入视图

创建结构指令 - 向指令提供上下文变量

Angular 进阶 - AoT

AoT - AoT局限

AoT - AoT配置

Immutable.js

Immutable.js - 什么是不可变性？

Immutable.js - 不变性的应用场景

Immutable.js - JavaScript解决方案

JavaScript解决方案 - Object.assign

JavaScript解决方案 - Object.freeze

Immutable.js - Immutable.js基础

Immutable.js基础 - Immutable.Map

Immutable.Map - Map.merge

Immutable.js基础 - 嵌套对象

嵌套对象 - 删除密钥

嵌套对象 - Map是可迭代的

Immutable.js基础 - Immutable.List

性能

管道

管道 - 使用管道

管道 - 自定义管道

管道 - 状态管道

表单

表单 - 入门

表单 - 模板驱动的表单

模板驱动的表单 - 嵌套表单数据

模板驱动的表单 - 使用模板模型绑定

模板驱动的表单 - 验证模板驱动的表单

表单 - 响应式/模型驱动的表单

响应式/模型驱动的表单 - 响应式表单基础

响应式/模型驱动的表单 - 验证响应式表单

响应式/模型驱动的表单 - 自定义验证响应式表单

表单 - 用户的视觉提示

模块

模块 - 什么是Angular模块？

模块 - 将组件、管道和服务添加到模块

模块 - 创建功能模块

模块 - 指令复制

模块 - 延迟加载模块

模块 - 延迟加载和依赖注入树

模块 - 共享模块和依赖注入

模块 - 共享相同的依赖注入树

路由

路由 - 为什么选择路由？

路由 - 配置路由

路由 - 将路由器重定向到另一条路由

路由 - 定义路由之间的链接

路由 - 动态添加路由组件

路由 - 使用路由参数

路由 - 定义子路由

路由 - 路由拦截

路由 - 将可选参数传递给路由

路由 - 使用辅助路由

状态管理

状态管理 - 示例应用

状态管理 - 使用选择器读取应用程序状态

状态管理 - Actions

状态管理 - 通过Dispatching Actions 修改应用 State

状态管理 - Reducers 和纯函数

状态管理 - Reducers 的 State 管理

状态管理 - 创建应用的Root Reducer

状态管理 - 配置你的应用

状态管理 - 更多Redux和Ngrx资源

Redux 和 Ngrx

将@ngrx添加到你的项目

定义应用的主状态

动画

TDD测试

TDD测试 - 测试工具链

TDD测试 - 测试设置

测试设置 - 文件名约定

测试设置 - Karma配置

测试设置 - TestBed配置（可选）

测试设置 - 类型

测试设置 - 执行测试脚本

TDD测试 - 简单测试

TDD测试 - 使用Chai

TDD测试 - 测试组件

测试组件 - 检验方法和属性

测试组件 - 注入依赖和DOM更改

注入依赖和DOM更改 - 覆盖测试的组件

测试组件 - 测试异步操作

测试组件 - 重构难以测试的代码

TDD测试 - 测试服务

测试服务 - 服务测试策略

测试服务 - 测试HTTP请求

测试HTTP请求 - 使用MockBackend

测试HTTP请求 - 替代HTTP Mock策略

测试HTTP请求 - 测试JSONP和XHR后端

测试服务 - 异步执行测试

TDD测试 - 测试Redux

测试Redux - 测试简单的Action

测试Redux - 测试复杂的Action

测试Redux - 测试Reducers

测试Redux - Afterthoughts

将Angular1.x项目迁移到Angular 2

将Angular1.x项目迁移到Angular 2 - 迁移准备

迁移准备 - 升级到 Angular 1.3+ 风格

迁移准备 - 使用 Webpack

迁移准备 - 迁移到 TypeScript

将Angular1.x项目迁移到Angular 2 - 选择升级途径

将Angular1.x项目迁移到Angular 2 - 避免全面转换

项目设置

项目设置 - Webpack

Webpack - 安装和使用

Webpack - Loaders

Webpack - 插件

Webpack - 概要

项目设置 - NPM脚本集成

Angular CLI

Angular CLI - 创建

Angular CLI - 创建新应用程序

Angular CLI - 启动应用

Angular CLI - 创建组件

Angular CLI - 创建路由

Angular CLI - 创建其他东西

Angular CLI - 测试

Angular CLI - Linting

Angular CLI - CLI命令概述

Angular CLI - 添加第三方库

Angular CLI - 集成现有应用程序

Angular 中的无障碍

Angular 中的无障碍 - 为什么需要无障碍

Angular 中的国际化

Angular 中的国际化 - 过程什么样的，如何参与？

Angular 中的国际化 - 在我们的模板中标记文字

Angular 中的国际化 - 使用Angular CLI提取翻译文本

Angular 中的国际化 - 如何导入已完成的翻译文件

如何导入已完成的翻译文件 - 使用AoT编译器

如何导入已完成的翻译文件 - 使用JiT编译器

词汇表

最佳实践与填坑的积累Yz

进一步阅读和参考

其他

其他 - The case for ZoneDelegate

其他 - Task Scheduling

其他 - 任务

其他 - Angular: Why TypeScript?

其他 - 测试组件

其他 - 使用 Redux 与 Components

其他 - 回顾 Reducers 和纯函数

其他 - Redux和组件架构

其他 - 配置应用以使用Redux

其他 - 插件

其他 - Persistent and Transient Data Structures

其他 - 使用RxJS操作符实现更多高级特性

其他 - 与其他框架比较

其他 - Angular 2中的Web辅助功能

其他 - 无障碍Web应用的关键

当前位置：首页 > 文档资料 > Rangle's Angular 2 Training Book 中文版 >

表单 - 响应式/模型驱动的表单

优质

小牛编辑

112浏览

2023-12-01

首先，在它的简便性上有一点魔法，但是在你熟悉基础知识之后，学习它的构建块将允许你处理更复杂的用例。

免责声明：以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。

不妥之处，敬请雅正

最后更新: 2023-12-01

上一篇模板驱动的表单 - 验证模板驱动的表单

下一篇响应式/模型驱动的表单 - 响应式表单基础

类似资料

响应式/模型驱动的表单 - 验证响应式表单

Angular 2提供了开箱即用的许多验证器。它们可以与其余的依赖关系一起导入。 app/login-form.component.html <div> <label for="username">username</label> <input type="text" name="username" id="username"
响应式/模型驱动的表单 - 响应式表单基础

这将让我们访问组件，指令和providers，如，FormGroup和FormControl 在我们的例子中，将构建一个登录表单，我们看下面的内容： app/login-form.component.html <form [formGroup]="loginForm" (ngSubmit)="login()"> <input type="text" name="username" id="us
响应式/模型驱动的表单 - 自定义验证响应式表单

让我们假设使用相同的登录表单，但现在我们还要测试我们的密码在其中某处有感叹号。 app/login-form.component.ts 一个简单的函数接受实例，并返回null如果一切都很好。如果测试失败，它返回一个具有任意命名属性的对象。属性名称将用于.hasError()测试。 app/login-form.component.ts  <div [hidden]="!
表单 - 模板驱动的表单

首先，考虑一个典型的表单： index.html signup-form.component.ts
模板驱动的表单 - 验证模板驱动的表单
模板驱动的表单 - 使用模板模型绑定

双向绑定

相关阅读

模板驱动的表单 - 嵌套表单数据重置角模板驱动的表单？Angular实现响应式表单模型表单基于表单响应的谷歌电子表格格式响应式表格之固定表头的简单实现带ngFor输入的角2模板驱动表单使用Chart.js图表库制作漂亮的响应式表单 1.3.1 响应式图表响应式网页设计中的单个样式表还是多个样式表多模型的复合表单表单输入模式 Struts2中接收表单数据的三种驱动方式谷歌表单分叉（不工作在谷歌表单响应表）勾选复选框自动移动谷歌表单响应响应模式谷歌表单响应提交和谷歌表单更新 jquery模式复制表单中的mvc提交表单partialview 单个Django模型，多个表？Symfony2表单和模式属性 JSOUP+多部分/表单-数据响应 Google表单对现有Google工作表列的响应并保持现有格式 Angular 2反应式表单“模式”验证器不工作正则表达式模式中的非单词如何以编程方式下载谷歌驱动器表单？控制器 - 代表单一模型 api响应的Swagger文档(类型列表)角2表单验证模式正则表达式错误 Struts2模型驱动实例 AMP表单提交重定向或响应 Angular 6反应式表单密码验证正则表达式模式和确认验证 AngularJs DatePicker-日历下拉列表不响应模型更改

开发工具

iOS的函数响应型编程微擎表单验证 Jquery表单验证插件 DB2的Ruby语言驱动 Quartz 表达式生成器卡片式插入列表 FreeForm智能在线表单设计器 Intel显卡的Linux驱动程序正则表达式测试器自动文字提示列表 Alsa声卡驱动 for Linux 滚动菜单 WizTools.org正则表达式测试工具动态下拉菜单简单的加入购物车动画首列固定的列表舒尔特表基于BeeFramework的表格控件

@小牛知识库 xnip.cn