Angular6中的嵌套表单组
是指在Angular6中使用表单组来构建复杂的表单结构。嵌套表单组允许我们在一个表单中嵌套其他表单组，以便更好地组织和管理表单数据。
嵌套表单组的主要优势是可以将表单分解为更小的可重用组件，使代码更加模块化和可维护。它还提供了更好的表单验证和错误处理机制，使得表单的验证和错误提示更加灵活和精确。
嵌套表单组适用于各种场景，特别是当表单结构复杂且需要重复使用时。例如，在一个注册页面中，我们可以将用户信息、地址信息和支付信息分别作为不同的表单组，然后将它们嵌套在一个主表单中。
在Angular6中，我们可以使用FormGroup和FormControl来创建嵌套表单组。FormGroup表示一个表单组，它可以包含其他表单组或表单控件。FormControl表示一个表单控件，它可以用于接收用户输入的值。
对于嵌套表单组，推荐使用腾讯云的云原生产品，如腾讯云容器服务（Tencent Kubernetes Engine，TKE）和腾讯云函数计算（Tencent Cloud Function Compute），以实现高可用性和弹性扩展的应用部署。此外，腾讯云还提供了云数据库MySQL版和云数据库MongoDB版，用于存储和管理表单数据。
更多关于Angular6中嵌套表单组的详细信息，请参考腾讯云的官方文档：Angular6中的嵌套表单组。
相关·内容
1回答
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
ngOnInit() {
this.createFormControls();
this.createForm();
}
createFormControls(){
this.firstName = new FormControl('',Validators.required);
this.lastName= new FormContr
浏览 2提问于2018-11-23得票数 0
我正在尝试在Angular6中创建嵌套表单组。 serviceItemForm: FormGroup;
apiForm : FormGroup;
this.serviceItemForm = this.fb.group({
'name': new FormControl('', Validators.required),
'description': new FormControl('', Validators.required),
'categoryIds': new FormControl([]
浏览 21提问于2019-01-19得票数 1
1回答
我使用反应性表单在角2中创建了一个表单组。我对此很陌生，所以如果这个问题没有意义的话，我会提前道歉。我在父组中创建了一个嵌套组，它有自己的自定义验证器。在下面的代码片段中，嵌套组是customRolesGroup。验证器用于嵌套表单组，但父窗体有一个控件，该控件也调用此验证方法。我遇到的问题是，每当父控件调用验证方法时，我都需要它自动将嵌套的组错误设置为null或false。
我是否可以将嵌套的组控件从父控件传递给验证器(customRoleValidation)，或者将嵌套的表单控件错误修补为null？
public createNewForm(event: string) : Form
浏览 0提问于2018-04-30得票数 2
回答已采纳
2回答
在angular6中使用反应性表单可以在哪里找到日期和时间选择器？我尝试过在各种博客中发现的许多例子，这些都是模板驱动的表单，我想要一个DateTime控件来处理反应性表单，因为我有一个使用反应性表单方法开发的表单，我尝试了所有这些链接，发现没有一个是反应性表单方法。
浏览 2提问于2019-03-25得票数 0
我有一个表，每个表单元格都是一个组件的不同实例。根据数据(日期、文本、链接)，我使用不同的组件。
由于这些组件有很多共同之处，我引入了一个TableCellMasterComponent，它由所有其他类型的表单元扩展。
我的所有组件都具有相同的主机属性：
@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
&#
浏览 0提问于2018-11-09得票数 7
回答已采纳
我正在使用reactive-form-validators来验证我的angular应用程序中的表单。我在显示嵌套表单的错误时遇到了一个问题。我尝试了一些例子，但没有成功。
这是链接。
浏览 1提问于2018-12-18得票数 0
我想在点击表单外的其他按钮时设置文本框的值，我该怎么做？ <form [formGroup]='student' (ngSubmit)='click()'>
<input type='text' formControlName='name'
<input type='submit' value='submit'>
</form>
<input type='button' (click)='setValueOfTextbox()
浏览 8提问于2019-03-19得票数 1
回答已采纳
这个问题基本上是这个问题的后续：
我需要构建一个CCK字段类型来存储多个数据，并构建fAPI表单元素来接受已经存在的每个数据的输入。这些元素通过fAPI #流程函数构建到多个HTML表单输入中。问题是，当我尝试在CCK字段中使用这些元素时，小部件的输入与hook_field_settings()中指定的数据库列不一致。小部件返回类似如下的内容：
Array (
[thumbnail_image] =>
[imceimage_path] => ...
[imceimage_alt] => ...
[imceimage_width] => .
浏览 0提问于2009-12-11得票数 2
我有一个将MVC应用程序迁移到Angular6的项目。现在这些设计已经存在于cshtml文件中，即视图中。因此，在angular中使用这些设计是可以的吗？ 注意:设计由大量的图片，css，js和图表组成。 我知道Angular的基础知识，了解表单模板和响应式表单，但从头开始设计它们需要更长的时间。 所以可以使用现有的cshtml标记并在Angular TS组件中执行编码部分吗？
浏览 17提问于2019-06-04得票数 0
1回答
我有一个表单，其中有些必需的输入不在表单标记中。即使这些输入无效，表单仍然是有效的。
如何在不移动表单标记中的所有输入的情况下修复这个问题？
具体来说，当与表单相关的任何输入都无效时，我需要使表单无效。不只是元素中包含的输入。(即，任何带有它的表单属性指向表单的输入)
示例：
<div class="radio-group">
<input type="radio" form="testForm" name="test2" value="a" ng-model="formData.t
浏览 4提问于2014-05-14得票数 0
回答已采纳
1回答
我正在尝试编辑单元格内的kendo网格元素。 我有一个kendo网格，其中的列定义如下： <kendo-grid-column title="Beam ID" field="id" width="30px">
</kendo-grid-column>
<kendo-grid-column field="additional_info.name" title="Name">
</kendo-grid-column> 我按照这个链接的第一个示例实现了一个单元格内编辑表单
浏览 12提问于2018-12-27得票数 0
在构建更复杂的反应性表单时，我偶然发现了一个问题，同时多次嵌套reactiveFormGroups。
所以我有两种情况：
表单组件->窗体部分组件->自定义输入组件
表单组件->自定义输入组件
目标是侦听自定义输入组件中的ngSubmit事件，以显示其错误状态。
在我的自定义输入组件中，我通过@Host()装饰器注入ReactiveFormsDirective。但是，如果组件嵌套在场景1中，则不会接收任何事件。
我的猜测是，这个场景中的问题与它试图获得的“错误”ControlContainer有关。@ host ()只是查找注入器链，直到它到达主机，而不是更远
浏览 0提问于2018-11-15得票数 4
回答已采纳
我们可以在同一个应用程序中运行不同版本的angular吗？例如:同一应用程序中的Angular 8和Angular 6。我知道角度加载在根div中。我的想法是在2个不同的根div中加载2 angular。例如:在index.html文件中，我们有：
<div id = "angular6"></div>
<div id = "angular8"></div>
我想知道我们是否可以做到这一点，以及实现这一目标的步骤是什么。
浏览 0提问于2020-03-12得票数 0
2回答
绑定集合集合中的对象
、、、、
我有一个表单，它填充了集合中的一些对象。我用一个列表实现了这个集合(一切都很好)，但现在我想使用一个集合。我注册了一个属性编辑器来创建对象。问题是我不知道我必须使用什么语法来填充集合的对象。
public class MyObject(){
Set<OtherObject> otherObjects = new HashSet();
}
我已经尝试了表单标签中的语法，比如语法a list：
name="otherObjects['${status.index}']"
并且类似于map的语法：
name="otherObjects[&#
浏览 1提问于2010-12-13得票数 9
回答已采纳
1回答
我目前正在做我的第一个angular项目之一，我正在努力决定采取什么方法最好。
我正在处理的项目包含一个包含金融模拟的表单(可以将它想象为将xls工作表放入angular应用程序)。
更改表单输入(xls单元格)中的值必须导致自动重新计算其他字段。这些字段可以分布在多行中。
目前，我正在尝试使用reactive forms模块来实现这一点，但是当元素发生变化时，我遇到了响应事件的问题(因为我觉得在每个字段上实现(更改)似乎不是一个好主意)。
有没有什么方法可以将值绑定到对象属性，并以这种方式计算它们？
为了提供一些额外的背景:我正在为有顾问的公司创建一个盈利模拟器。因此，每一行都包含一个顾问，
浏览 0提问于2018-11-04得票数 0
我已经在angular6项目中创建了角反应动态表单。我得到的表单值如下所示：
const formValues = {
name: 'test1',
age: '02/08/1985',
product: {
apple: false,
orange: true,
banana: true,
graps: false
},
sex: 'Male',
city: null,
address: null
}
如果键值为null，我将显示空数组，如果它有值，将显示数组中的值，而产品键值为tru
浏览 2提问于2021-06-29得票数 0
我正在使用angular6创建一个用户表单，并为道布使用datepicker。“道布”字段是从服务器端填充的，我的问题是，如果我单击“道布”字段，日期将被清除，并且第一次单击时日期选择器不会打开。我怎么才能解决这个问题呢？
请帮我解决一下。
浏览 0提问于2018-11-08得票数 1
无法读取未定义对象的属性“”length“”：无法在对象的本机(F:\Learnings\AngularHandsOn\Angular6\angular6Handson\node_modules\@angular\cli\models\command-runner.js:69:43)处的listAllCommandNames.sort TypeError读取未定义的listAllCommandNames.sort的属性“”length“”。“”(F:\Learnings\AngularHandsOn\Angular6\angular6Handson\node_modules\@angular\
浏览 0提问于2018-05-12得票数 3
1回答
代码/演示位于
我正在尝试创建一个嵌套的反应式表单。这是一个简单的注册表单。它有Firstname、Lastname、email、Password和VerifyPassword字段。我还为字段创建了验证器。html还根据字段是否有错误来分配Bootstrap的classes。
<input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="validateField(signupForm,
浏览 0提问于2018-08-28得票数 0
回答已采纳
2回答
我是angular6 & nodejs的新手。我正在尝试集成sendbird和Angular6，但没有得到任何清晰的想法，如何开始和从哪里开始。
以前做过这个的人可以指导我吗？
另外，我已经在python中调用了sendbird api。
浏览 28提问于2018-12-13得票数 0
回答已采纳
在超文本标记语言页面中，将表单的每个元素都包装在<form>标记中是错误的吗？我很好奇为什么这会是错误的：
基本上我必须介绍两个表单(form1和form2)，其中有一些元素与第一个表单相关，而其他的second.The布局必须完全基于表，由于这两个表单的元素都在页面上(根据，代码是有效的)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<hea
浏览 0提问于2012-02-24得票数 4
回答已采纳
我正在尝试使用bootstrap-datetimepicker构建一个表单来选择日期，当在bootstrap表单中使用时，日历不能正确地定位在textbox下，日历图标也不只是文本框旁边的一个小图标，就像我在教程中做一个简单的datetimepicker一样。我正在努力寻找解决这个问题的方法。如果有人能帮上忙，我将不胜感激！
<div class="container-fluid">
<div class="page-header">
<h1>Rental Car Agr
浏览 3提问于2015-06-17得票数 0
1回答
我做了一个简单的登录表单。我将我的用户登录到：
Auth::loginUsingId($user->id, true);
但是，当我将用户重定向到ClientController时--我要重定向到登录表单--8月份的会话并不是持久的。
return redirect()->action('ClientController@index');
我的路线：
Route::group(['middleware' => 'web'], function() {
Route::get('/', 'HomeCo
浏览 3提问于2016-01-20得票数 1
回答已采纳
1回答
假设我们有一个地址，并且希望以多种形式重用它(例如Person，Company，.)在角度上，所有的东西都是成分，所以我们应该写一个组件。
这样做最好的方法是什么？结果，没那么容易。它应该封装数据并验证嵌入的表单字段。我找到了解决这个问题的两种方法：
1.自定义表单组件
我不喜欢它的地方：过于复杂的，所有的东西都是子组件中的委托的。通过验证，您将需要某种“内部形式”才能使验证工作。表单控件必须在父控件中定义，封装是不可能的。简单的示例，请参阅：
2.组件，它有两个输入: FormGroup和表单提交状态。
取自的想法
比自定义表单组件简单得多。我们需要提供在嵌套组件之外构建的FormGroup
浏览 0提问于2018-05-01得票数 3
在数据记录的形式下，我上传了一张图片，图片将被上传到服务器文件夹中，其名称将存储在数据库中。 在这个编辑表单中，我从服务器获取文件名，我需要在这个表单中填写<input type="file">。在angular6中使用反应形式。 这是我在ts文件中的代码： ngOnInit() {
this.EditForm=this.fb.group({
imageName:['',Validators.compose([Validators.required])]
})
this.SetForm(this.dat)
}
SetForm(d
浏览 100提问于2019-02-08得票数 3
回答已采纳
我想在提交表单之前获取formControlName输入标记值。所以我创建了一个方法来获取值。但是我无法获得formControlName的当前输入值。
我已经从表单中删除了formcontrolname，以便仅获取ngmodel输入值，但我得到了一个错误，即表单应该具有formcontrolname。
<form [formGroup]="FormGroup1" (ngSubmit)="onSubmit()">
...
<input type="text" formControlName="searchConten
浏览 0提问于2019-03-27得票数 0
3回答
在Java和Groovy中构建web表单的常用方法是什么？
Spring和Grails提供了相应的标记库，但我想知道是否有表单框架，允许将表单创建为对象集、动态操作元素、嵌入子表单、填充和验证以及呈现。
例如，如果我有一组用于多个表单的公共字段，我希望重用代码。此外，这样的一组元素又可以是另一组的一部分。我还希望动态地重新排序元素，更改字段名称和其他输入字段属性，等等，而无需更改任何HTML代码。
浏览 0提问于2011-12-20得票数 4
使用Angular6时，假设我有两个子组件A、B，它们都是父组件P的一部分。我希望在组件A上使用表单输入-所以一旦单击，字符串值将传递并在组件B上触发一个函数：
functionOnB(valueFromA: string) { //some code here; }
这有可能吗？
我已经使用EventEmitter成功地在组件之间传输了数据，但是是否有可能用这些数据调用函数，而不仅仅是传递原始信息？
浏览 1提问于2018-09-19得票数 5
回答已采纳
1回答
我正经历着这种奇怪的行为。当我试图保存表单时，上面写着Unpermitted parameter: organization_type
对于我的组织类型，我只有一个模型，但我不认为这是问题所在，因为根据我的理解，属性是在用户控制器中处理的。
我尝试将属性作为organization_type (单数)出现在表单和控制器白名单中，但这是行不通的。
但是，在表单中，如果我有:organization_types，字段将不会出现。
我对此感到很困惑。
因此，简单地回顾一下：
我没有OrganizationType的控制器
以我所拥有的形式：:organization_type。如果我把它复数
浏览 1提问于2016-09-16得票数 2
回答已采纳
2回答
我有一个表格，通过一些输入。有一段时间，我在这个表格中输入了另一种形式。当我没有内部表单时，我的父表单是有效的，但是当我有内部的原始形式和原始形式是有效的(我看到输入确实完成)和内部形式是无效的时候，我的原始表单也是无效的。如果单击submit1，我需要以原始形式保存输入，如果单击submit2，则需要保存内部输入。
在webform中，我们进行了分组验证。在这种情况下，我们是否在角度验证中以webform的形式分组？
<form name="original" novalidate class="form-horizontal bv-form">
浏览 6提问于2016-08-21得票数 1
回答已采纳
我参考了许多关于堆栈溢出的文章，以调用Angular6的typescript中的JavaScript方法，但它们都不起作用，首先我寻找一个简单的函数与警报将在JavaScript中执行并从typescript调用，请求一个工作方法和如何创建JavaScript文件的d.ts文件的详细描述，以及所有配置文件中的详细更改，如angular.json，tsconfig.json等，如果可能，请发布Angular6的工作和测试示例
浏览 33提问于2018-09-23得票数 -2
回答已采纳
我正在为我的应用程序尝试Angular6 JSON表单，并陷入了具有数组模式的问题
基本布局如下所示
{
"schema": {
"type": "array",
"properties": {
"type": { "type": "string" },
"number": { "type": "string" },
}
},
&
浏览 2提问于2019-04-05得票数 1
1回答
我正在寻找，并且无法找到关于如何使用formGroup的最佳实践。
是否必须将formGroup 与表单标记括在一起?
我看过这个堆栈溢出问题：
我创建了这个组件模板：
<div [formGroup]="infoIdentityForm">
<div class="info-identity_title" *ngIf="showTitle">
<div class="group-title">Titre</div>
<div class="
浏览 4提问于2016-11-15得票数 8
回答已采纳
1回答
让Angular6试一试。在我的Angular1应用程序中，我将作用域绑定到html，如下所示：
<div ng-controller="MyCtrl">
</div>
现在，在基于组件的Angular6中，有：
@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
浏览 0提问于2018-11-18得票数 0
我在Angular 6中有一个简单的模板驱动的表单。在表单提交时，我只想从组件文件中清除一个字段。这是否可能，以及如何实现。表单域具有#username
浏览 0提问于2018-06-08得票数 1
我正在构建一个angular表单，它将通过API将数据发送到服务器。API需要此格式的对象
{
"firstname": "string",
"lastname": "string",
"custom": {
"blood_type": 'string',
}
}
使用当前表单，我正在构建我在控制台中获得的
{
"firstname
浏览 11提问于2019-11-20得票数 0
2回答
我得到了一个Angular Reactive表单，除了当我填写所有必填字段并按下Chrome的后退按钮(在提交或不提交之后)并再次返回表单页面时，它工作得很好。我的表单仍在填写，但我无法再次提交该表单。我猜这是因为表单验证无效，我必须重新填写每个字段才能再次按下提交按钮。 我如何才能强制重新验证表单，这样我就不必再次删除和键入所有内容？ profileForm = this.fb.group({
checkbox: [false],
checkbox_cgv: [false, Validators.requiredTrue],
firstName: ['&
浏览 17提问于2020-03-18得票数 1
我正在尝试创建一个自定义网格结构。
该结构将由不同的行组成，每行可以有多列。每列将有1-2个表单域。
在Antd v4.2.0中，我们有帮助我们创建动态表单的<Form.List />组件。
我试过使用它，它可以用于动态行部分，但我不知道如何在<Form.List>中创建多个列，即<Form.List>
我也可以手动创建此网格，但我也希望在此网格中利用表单验证。
我正在尝试创建的视觉表示：
浏览 0提问于2020-05-06得票数 2
我正在尝试创建一个带有付款和发货地址的地址表。当选中传送地址上的复选框时，我希望跳过该地址上发生的表单验证。
我已经使用一个切换选项创建了下面的表单类型，该选项将显示和处理复选框，但是即使选中该表单，表单也仍然是有效的。
Symfony有，即使我有几乎完全相同的代码，检查时也不会关闭验证。我没有使用验证组，所以我只是禁用默认组来禁用实体上的验证。
AddressType为Address类构建一个表单(在某些字段(如NotBlank和Callback)上有注释约束)。
class AddressType extends AbstractType
{
public function bui
浏览 0提问于2017-08-16得票数 8
回答已采纳
我的父组件使用FormGroup，我希望子组件向其父组件报告值更改。我试图通过在子组件中使用NG_VALUE_ACCESSOR来解决这个问题，从而允许它作为表单字段来运行。正如我所理解的，我们应该使用以下4个函数
writeValue(value) {
this.value = value;
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouch = fn;
}
setDisabledState?(isDisabled: boolea
浏览 3提问于2021-11-05得票数 1
回答已采纳
1回答
角形2/5包含复选框的条件验证
、、、、
我有一个反应性表单，它有一个带有复选框的表和每一行的一些用户输入。我希望这样做，如果用户选中一个复选框，相应的输入需要填写。例如，如果选中了11+，但是相应的用户输入(即价格)没有填写，并且用户试图按下add按钮，那么它就不应该提交表单和表单，而应该提供消息。我不知道如何有条件地应用这个逻辑。
在TS中的表格：
this.addSubjectForm = new FormGroup({
'type' : new FormControl(null, Validators.required),
'subject' : new FormControl(null
浏览 1提问于2018-04-05得票数 0
回答已采纳
2回答
我正在做一个angular6项目。使用表单角服务，我调用API并以下列方式发送参数：
角6
GetUserList() {
var paramsT = new HttpParams();
paramsT.append('userID', '100');
paramsT.append('name', 'himadri');
return this.http.get(this.baseURLApi + "/User/GetUserList", { params: paramsT });
}
如何接收HttpPar
浏览 0提问于2018-09-20得票数 1
回答已采纳
2回答
嵌套窗体组触发器多次更改检测
、、、、
使用作为参考，我使用反应性表单复制了动态嵌套表单组创建。
但是，当将新的表单组添加到表单数组中时，它会多次触发更改检测。
我的代码
component.html
<button mat-flat-button color="primary" (click)="addMaterial()">Add</button>
<form [formGroup]="positionFormGroup" novalidate>
<table formArrayName="positionInfos&
浏览 1提问于2020-08-01得票数 0
回答已采纳
1回答
我创建了如下所示的反应性形式
this.customerForm = this.fb.group({
"name": ["", Validators.required],
"email": "",
"info": this.fb.group({
"name": ["", Validators.required],
})
})
我添加了getter函数来获取表单控件，如下所示
get f() { return th
浏览 2提问于2020-02-13得票数 2
1回答
我在angular6中用@angular/pwa开发了一个PWA应用程序，它工作得非常好。我也试图通知用户更新PWA应用程序时，用户打开的应用程序，如果有任何更新的应用程序。我浏览了不同的文章和博客，找到了文章，但它不是为angular6写的。我无法添加任何eventListeners，因为服务工作者是自动创建的。请帮我解决这个问题。谢谢!
浏览 6提问于2018-07-11得票数 1
在我更新到Angular6并将@ngtools/webpack从"6.0.0-beta.8“更新到"6.1.2”之后，我发现Angular6选项不再工作了。
通常，它会替换正确的env文件：
new AngularCompilerPlugin({
...
hostReplacementPaths: {
'environments/environment.ts': environmentFiles[NODE_ENV]
},
...
})
但现在没有了。
我对@ngtools/webpack进行了深入调试，发现这里的normalize函数不工
浏览 1提问于2018-08-03得票数 3
1回答
我试图在这个表单的输入中得到值。每一次用户按下按钮时，都会生成输入部分。但是，在阅读了文档之后，我还不清楚应该如何做.html才能正确地获取数据。
component.html
<form [formGroup]="formulario">
<label>
Capacidad
<input type="text" formControlName="capacidad">
</label>
<label>
Max. Casas
<input t
浏览 2提问于2020-01-16得票数 0
回答已采纳
我的角8应用程序使用了大量的嵌套表单，为了尽量减少代码的数量，我建立了一个模型类来为我的反应性表单定义一个结构。我的html页面有一个嵌套组件组成的手风琴，它应该创建一个表单来添加或更新数据。当试图根据模型结构使用现有数据填充表单时，我现在得到一个错误：(例如)：错误错误:无法找到路径控制：'info -> charName‘
在我的home.ts中，导入导出的类并创建父表单，如下所示：
this.CharGenMagusForm = this.fb.group({
characterid: [''],
playerUID: [''],
浏览 3提问于2021-02-14得票数 0
回答已采纳
每当表单发生更改时，我都希望取消选中某个复选框。复选框是该表单的一部分，因此我只想在值更改来自该复选框之外的任何其他控件时取消选中它。
我订阅了一个FormGroup的值更改，如下所示
import { FormBuilder, FormGroup } from '@angular/forms';
export class App {
form : FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = formBuilder.group({
浏览 7提问于2017-08-11得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
