首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 4 FormGroup -将父窗体控件传递给子组件

Angular 4中的FormGroup是一个用于管理表单控件的类。它允许我们将一组相关的表单控件组织在一起,并提供了一些便捷的方法来访问和操作这些控件。

在Angular中,我们可以通过使用FormGroup来创建一个表单组。表单组由一组FormControl组成,每个FormControl代表一个表单控件。我们可以将这些表单控件分为父窗体控件和子组件控件。

要将父窗体控件传递给子组件,我们可以使用@Input装饰器。@Input装饰器允许我们将数据从父组件传递到子组件。

首先,在父组件中,我们需要创建一个FormGroup对象,并将其作为一个属性绑定到子组件上。我们可以使用FormGroup的get方法来获取父窗体控件的值。

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [parentForm]="myForm"></app-child>
  `
})
export class ParentComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    });
  }
}

然后,在子组件中,我们可以使用@Input装饰器来接收父窗体控件。我们可以在子组件的模板中使用这些控件。

代码语言:txt
复制
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: `
    <div [formGroup]="parentForm">
      <input type="text" formControlName="name">
      <input type="email" formControlName="email">
    </div>
  `
})
export class ChildComponent {
  @Input() parentForm: FormGroup;
}

在这个例子中,父组件创建了一个名为myForm的FormGroup对象,并将其传递给子组件。子组件使用@Input装饰器接收了这个FormGroup对象,并在模板中使用了这些控件。

这样,父窗体控件就成功地传递给了子组件,子组件可以使用这些控件来访问和操作表单数据。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):腾讯云提供的弹性计算服务,可快速创建和管理云服务器实例,支持多种操作系统和应用场景。了解更多信息,请访问:腾讯云云服务器(CVM)
  • 腾讯云云数据库MySQL:腾讯云提供的高性能、可扩展的关系型数据库服务,适用于各种规模的应用程序。了解更多信息,请访问:腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过在组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理 在使用 FormGroup 时,同样在组件中定义一个属性用来承载控件组实例...,然后控件组中的每一个控件作为属性值添加到实例中 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...: FormGroup): ValidationErrors | null => { // 获取控件的信息 // const name = controlGroup.get('name'...: ValidatorFn = (controlGroup: FormGroup): ValidationErrors | null => { // 获取控件的信息 // const name

18.9K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...等数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的值(获取setvalue...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件

2.8K50

WPF自学入门(八)WPF窗体之间的交互

今天我们一起来看一下WPF窗体之间的交互-窗体之间的值。有两个窗体,一个是窗体,一个是窗体。要将窗体的文本框中的值传递给窗体中的控件。我们该怎么实现?...接下来我们一起来实现窗体之间的值,在窗体上我们放两个控件,一个文本框TxtMessage,另一个是按钮BtnSend.窗体上放一个文本框TxtInput。 窗体的界面: ?...窗体的界面: ? 要实现值,我们首先要在窗体中定义一个可读可写的公用的字符串:getMessage。然后在窗体中按下按钮的时候,定义一个字符串Message,用来存放输入框的文字。...再将Message中存放的输入框的文字传递给窗体中定义的可读可写的公用字符串getMessage。下面看一下实现的后台代码: 窗体的后台代码: ? 窗体的后台代码: ?...这里我进行假设一个场景,依然还是有父子窗体窗体窗体中一个按钮的属性设置器,在窗体中添上要设置属性的值,然后按设置完成,窗体关闭,窗体的相应按钮的属性也根据窗体中的设置值而改变!

2.2K10

angular知识点梳理第三篇-组件

文章目录 前文回顾 组件介绍 什么是组件 创建一个组件 更改默认启动页内容 组件模块介绍 组件的生命周期 组件之间值 父子之间组件值(函数)给组件 第一步:在parent组件的ts文件中...这篇文章主要是angular组件部分尽可能的梳理明白!...整个组件递给组件写法如下: 在组件的视图层文件中实现this的传递 【parent.component.html】 <!...组件值(函数)给组件 方案一 通过viewchild进行节点获取 第一步:在组件引入组件的地方添加节点值 【parent.component.html】 <!...方案二:通过@Output触发组件的方法 这个方式就是同归广播的方式进行触发函数,组件中的数据主动传递到组件中去 第一步:在组件ts文件中引入angular的核心模块中的output和EventEmitter

2.2K10

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

最后会看看刚刚发布的 Angular 4 的新特性给响应式编程带来了什么新鲜的元素。...Angular 中处理响应式表单只有 3 个步骤: 1、在组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...]="xxx" 指令,这个 xxx 就是你在组件中声明的 FormGroup 类型的成员变量:比如下面代码中的 form: FormGroup; 3、在组件的构造函数中取得 FormBuilder 后(...比如下面代码中的 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才的类型为 FormGroup 的成员变量。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。

5.2K10

Angular核心-父子间组件传递数据-重难点

(达内教育学习笔记)仅供学习交流 Angular核心-父子间组件传递-重难点 Angular核心-父子间组件传递数据-重难点方向一:=》传递数据方向二:=》父子组件传递数据的简便方法:...Angular核心-父子间组件传递数据-重难点 方向一:=》传递数据 方向二:=》 父子组件传递数据的简便方法: Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀:“Props...]="userName"> child2.ts组件定义扩展属性 //普通属性不能被组件值 //child2Name:string = ''... 组件通过触发特定事件(其中携带数据),把数据传递给组件组件提供事件处理方法) Child.ts:自定义事件发射器–输出属性 import { Component, EventEmitter,...('parent.docry():') console.log(e) this.userName = e } //e就是组件想传递给组件的数据 父子组件传递数据的简便方法:

1.2K20

angular框架如何实现父子组件值、非父子组件

文章目录 1.理解父子组件、非父子组件 2.组件组件值- -@input 3.组件通过@ViewChild主动获取组件的数据和方法 4.非父子组件如何传递数据 1.理解父子组件、非父子组件...父子组件可以相互获取对方组件的数据以及方法。 2.组件组件值- -@input 组件不仅可以给组件简单的数据,还可以把它自己的方法以及整个组件传给组件,通过HTML模板实现值。...看看操作步骤: 在组件中给组件的HTML传入“msg”信息: 假设shopping组件嵌入到news组件中,则shopping是组件 下面给组件通过“模板属性”方式传递数据: <app-shopping...下面看实际操作: 第一步:在组件声明即将传递给组件的message字符串 第二部:在组件模块中引入组件 第三部:在组件ts文件中接收组件传来的数据 查看浏览器是否值成功...3.组件通过@ViewChild主动获取组件的数据和方法 在angular也提供了一个@Output修饰器来实现组件组件值,但是这个方法是较复杂的,我们使用另一种@ViewChild方法来实现

1.5K20

C++ Qt开发:自定义Dialog对话框组件

Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章重点介绍自定义Dialog...自定义对话框需要解决的问题是,如何让窗体窗体进行数据交换,要实现数据的交换有两种方式,第一种方式是通过动态加载模态对话框,当用户点击确定后通过GetValue()来拿到数据,而第二种方式则是通过发送信号的方式数据投递给窗体...,此时通过调用ptr->GetValue()窗体的成员函数来返回一个字符串,并将其设置到窗体的编辑框内,主函数代码如下所示; // 首先要包含Dialog对话框类 #include "dialog.h...:endl; ui->lineEdit->setText(the_value); } // 删除释放对话框句柄 delete ptr; } 至此就实现了参数的窗体传递到窗体...,而由于是信号控制,所以当发送参数到窗体后,窗体并不会立即关闭,如下图所示; 完整案例下载

35410

C++ Qt开发:自定义Dialog对话框组件

Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章重点介绍自定义Dialog...自定义对话框需要解决的问题是,如何让窗体窗体进行数据交换,要实现数据的交换有两种方式,第一种方式是通过动态加载模态对话框,当用户点击确定后通过GetValue()来拿到数据,而第二种方式则是通过发送信号的方式数据投递给窗体...,此时通过调用ptr->GetValue()窗体的成员函数来返回一个字符串,并将其设置到窗体的编辑框内,主函数代码如下所示;// 首先要包含Dialog对话框类#include "dialog.h"...lineEdit->setText(the_value); } // 删除释放对话框句柄 delete ptr;}至此就实现了参数的窗体传递到窗体...,而由于是信号控制,所以当发送参数到窗体后,窗体并不会立即关闭,如下图所示;完整案例下载

32710

React Native 系列(五) -- 组件

任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么值的呢?这篇文章介绍到顺、逆已经通过通知值。...:控件控件传递一个name属性的值,控件展示控件传递过来的值: image.png 上述代码的数据传递其实是这样的: 主组件 -> FatherComponent -> SonComponent...但是有时候,我们并不是在创建 组件 的时候就传递值,而是需要等待某个触发事件的时候,再传递,这就涉及到获取组件值。 通过ref拿到组件,然后传值 举个?...image.png image.png 逆 使用方法回调: 在组件定义一个处理接收值的方法 把这个方法传递给组件,并且绑定this,组件就能通过this.props拿到这个方法调用 举个例子,...(ps:和上面通过ref拿到组件,传递的代码有区别,注意组件层级) // 组件 class SonComponent extends Component { addClick(){

1.5K100

angular面试题及答案_angular面试

:在angular初始化组件及其组件的视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和视图的变更检测之后调用,只适用于组件 ngOnDestroy:...父子组件之间的数据传递 @Input 组件组件传递数据和传递方法(组件中使用) @output 组件值给组件 (事件传递的方式)(组件中使用) //组件中使用事件发射器 @output...() somethingChanged = new EventEmitter(); somethingChanged.emit(value); 使用@ViewChid 组件通过局部变量获取组件的引用...,主动获取组件的数据和方法(组件中使用) 4....1、渲染得更快   2、需要的异步请求更少   3、需要下载的Angular框架体积更小   4、提早检测模板错误   5、更安全 JIT优势   编译时间短,除非确实有动态组件的需求,否则

10.9K120

快手( AAuto Quicker ) v6.5.06更新记录

2、标准库中增加 win.flashBox 组件,用于支持flash桌面透明、或者flash窗口在窗体上透明悬浮显示。...在传统窗体中,要让一个控件完美透明,并且完美浮动在其他控件前面,是一件比较麻烦的事。...一个窗体窗口总是显示在窗口的内部,例如你在网页上看到flash是透明的,但是flash一半显示在网页里面,一半显示在浏览器外面在桌面上透明,这个实现起来就很麻烦了。...控件仍然可以象一个窗口(实际上他不再是窗口,只是伪装成窗口)那样如影随形的跟随窗口移动, 并且按照窗体设计器中预设的参数(例如固定边距)来自动调整位置和大小。...win.flashBox 用于在桌面上透明显示flash动画,也可以支持让窗口透明显示flash动画。 支持内存加载,可生成独立组件,支持最新的flash控件

86630

Angular 结合 NG-ZORRO 快速开发

这是我参与「掘金日新计划 · 4 月更文挑战」的第7天。 连更的这几天的文章,我们已经了解了不少 angular 的知识点了,这次我们来个小成品。...思路: 先添加页面 user 用户的列表页面,使用 ng-zorro 中 table 组件 用户的新增和更改页面可以共用同一个页面,使用 ng-zorro 中 form 组件 页面删除功能直接使用弹窗提示...,使用 ng-zorro 中 modal 组件 对 ng-zorro 组件按需引入 调整路由文件 按照思路,我们得在 ng-zorro 引入: // app.module.ts import { ReactiveFormsModule...router-outlet> 菜单展示,如果我们需要做权限管理的话,是需要后端配合进行值的...// user-info.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup

1.7K10
领券