Angular 里使用 FormControl 的步骤(一)

简介: Angular 里使用 FormControl 的步骤
  1. 导入 FormControl:
import { FormControl } from '@angular/forms';

Component 里创建一个 name 实例,类型为 FormControl

2.png

name = new FormControl('Jerry');

通过构造函数 FormControl 设置初始值。

  1. 在 HTML 文件里,将 element 同 Component 的 name 属性建立绑定关系:

image.png

image.png

这之后 Component name 属性的值,就会自动传递到 HTML element 里:

image.png

这样,表单控件和 DOM 元素就可以互相通讯了:视图会反映模型的变化,模型也会反映视图中的变化。

使用 .value 可以访问 FormControl 实例的值:

<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">
<p>显示控件的值: {{ name.value }}</p>

image.png

如何使用 setValue 修改 FormControl 的值

image.png

updateName() {
  this.name.setValue('Nancy');
}

点击按钮之后:

image.png

值变为 nancy:

image.png

在 event handler 里看到 click 响应事件在 zone.js 里的统一处理:

3.png

4.png

最终在 core.js 里调用 executeListenerWithErrorHandling

5.png

执行 setValue:

6.png

7.png

目录
相关文章
|
7月前
|
JSON 监控 JavaScript
Angular 里使用 FormControl 的步骤
Angular 里使用 FormControl 的步骤
27 0
|
JSON 监控 JavaScript
Angular 里使用 FormControl 的步骤(二)
Angular 里使用 FormControl 的步骤
123 0
Angular 里使用 FormControl 的步骤(二)
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2
|
3月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
19天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
3月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
40 1
|
1月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
23 0
|
2月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
3月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0

热门文章

最新文章