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

在Angular 7中没有从@ form.controls ()表单中获取formArray的输入

在Angular 7中,如果无法从@form.controls()表单中获取formArray的输入,可能是由于以下原因:

  1. 错误的表单控件名称:请确保在@form.controls()中传递的表单控件名称与模板中定义的名称一致。如果使用formArray,则需要使用formArrayName指令来定义表单控件。
  2. 未正确初始化formArray:在使用formArray之前,需要先初始化它。可以通过在组件的构造函数中使用FormBuilder来创建一个formArray实例,并将其赋值给相应的表单控件。
  3. 未正确绑定formArray:请确保在模板中正确地绑定了formArray。可以使用*ngFor指令来循环遍历formArray中的每个表单控件,并使用formGroupName指令来指定每个表单控件的名称。
  4. 未正确获取formArray的输入:如果以上步骤都正确,但仍无法获取formArray的输入,则可能是由于在组件中未正确引用formArray。请确保在组件中正确地引用了formArray,并使用.value属性来获取其输入值。

总结起来,要从@form.controls()表单中获取formArray的输入,需要确保正确命名表单控件、正确初始化和绑定formArray,并正确引用和获取其输入值。

关于Angular 7和表单处理的更多信息,您可以参考腾讯云的Angular开发文档:Angular开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue

2.8K50
  • Angular: 最佳实践

    Note: 本文中,我将尽量避免官方 Angular Style Guide 提及模式和有用实践,而是专注我自己经验得出东西,我将用例子来说明。...我们知道一个路由对应一个 Angular 组件,但是我推荐你使用容器组件,它将处理数据(如果有数据需要传递的话)并将数据传递给另外一个组件,该组件将使用输入所包含真实视图和 UI 逻辑。...模版到组件方法委托比原始逻辑更难。请注意,这里我用了比原始更难词语,而不是复杂这个词。这是因为除了检查直接条件语句之外,任何逻辑都应该写在组件类方法,而不是写在模版。...模版写 *ngIf=”someVariable === 1” 是可以,其他很长判断条件就不应该出现在模版。...读者可能意识到我并没有写关于 Directives 和 Pipes 相关内容,那是因为我想写篇详细文章,关于 Angular DOM 是怎么工作

    2.8K40

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

    入坑到弃坑 - Angular 使用入门 Angular 入坑到挖坑 - 组件食用指南 Angular 入坑到挖坑 - 表单控件概览 三、Knowledge Graph ?...四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件数据模型,达到获取用户输入数据功能 模板驱动表单...4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以控件上添加上原生 HTML 表单验证器来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...ngOnInit(): void { } } 针对多个字段进行交叉验证时,模板页面,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

    18.9K20

    Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

    前言 表单在整个系统作用相当重要,这里主要扯下响应表单实现方式。...首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...; Submit()函数内,点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...=》 可以理解为获取且可以操作整个表单数据 FormBuilder:表单数据构建工具[构建初始表单],简化构建代码(包括了new FormGroup(),new FormControl(),new...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段值!

    3.8K20

    Angular Input和Output

    Input 是属性装饰器,用来定义组件内输入属性。实际应用场合,我们主要用来实现父组件向子组件传递数据。...Angular 应用是由各式各样组件组成,当应用启动时,Angular根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。...通过上面的实例,我们知道我们可以 AppComponent 父组件监听 CounterComponent 子组件 change 事件,然后 change 事件更新 initialCount 值...当 Angular 解析模板时,遇到 [(modelName)] 形式绑定语法,它会期待这个指令中会存在一个名为 modelName 输入属性和一个名为 modelNameChange 输出属性...exportAs 属性,获取 ngModel 实例,进行获取控件状态,控件状态分类如下: valid - 表单值有效 pristine - 表单值未改变 dirty - 表单值已改变 touched

    2.4K50

    AngularDart4.0 指南- 表单

    模板驱动形式 您可以通过使用本页描述特定于表单指令和技术Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...你还没有使用Angular没有绑定或额外指令,只是布局。 模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...p模板输入变量每次迭代是不同power; 您使用插值语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强表单元素上定义一个模板引用变量。 多处按钮引用该变量。

    17.5K30

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

     Rx--隐藏在Angular 2.x利剑 一文我们已经初步了解了 Rx 和 Rx Angular 应用。 今天我们一起通过一个具体例子来理解响应式编程设计思路。...比如:如果年龄数据 33 删掉个位变成 3,此时我们没有改变年龄单位,合并流新数据应该是 3岁 。...响应式表单 Rx Angular 表单处理非常强大,有模版驱动表单和响应式表单两类,两种表单各有千秋,不同场合可以分别使用,甚至混合使用,但这里就不展开了。...Angular 处理响应式表单只有 3 个步骤: 1、组件 HTML 模版给要处理控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...这两个数据流其实是来自于两个控件变化,而响应式表单获取变化是非常简单就一行: 上面这行代码意思是表单控件数组取得 formControlName 为 age 这个控件然后监听其值变化

    5.3K10

    AngularDart4.0 指南 原

    指南 了解Angular基础知识,如本地开发 安装, 显示数据和接受用户输入,构建简单表单, 将应用程序服务注入到组件,以及使用Angular模板语法。...示例代码 每个页面都包含页面随附示例应用程序代码段。 您可以应用程序重用这些片段。 参考页 词汇表定义Angular开发人员应该知道术语。...获取依赖关系 WebStorm: 打开新项目。 项目视图中,双击pubspec.yaml。...4.阅读数据显示以查看数据绑定是否屏幕上放置组件属性值。     5.阅读用户输入,了解如何响应用户启动DOM事件。    ...6.阅读表单,其中涵盖用户界面数据输入和验证。     7.阅读依赖注入,了解如何从小型单用途零件构建大型,可维护应用程序。

    2.7K20

    Angularjs1.X进阶笔记(1)—两种不同双向数据绑定

    一. html与Controller双向数据绑定 html-Controller双向数据绑定,开发中非常常见,也是Angularjs1.x宣传点之一,使用没有太多问题。...1.1数据html流向controller 也就是视图层流向模型层,原生html需要使用表单元素(例如input标签)来收集用户输入信息,Angularjs通过表单元素上使用ng-model标签...1.2 数据controller流向html 也就是模型层流向数据层,当controller数据模型变量发生变化后,Angularjs又会根据数据模型值去改变ng-model指令绑定表单元素值...我们需要获取到这个DOM元素,然后改变它innerHTML属性,如果是表单元素就修改value。其实Angularjs也是这样做,只不过使用了自己封装方法——$apply()。...而当我们再点击4次数字标签(一共点了5次)后,控制台可以看出,scope.pagination值已经成为10,而页面上使用ng-bind指令获取结果却依旧是5。

    3.5K20

    angular面试题及答案_angular面试

    Angular中有三种方法可以做到这一点: Emulated : 样式其他HTML传播到组件。 Native : 来自其他HTML样式不会传播到组件。...ngOnInit : angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以angular生命周期看,constructor是执行在先 所以既然ngOnchanges...是输入属性发生变化时候调用,并且ngOnInit是ngOnchanges执行之后才调用,而constructor是组件实例化时候就调用了,也就是说,constructor是取不到输入属性...|Function|string 类型选择器 不同点 ContentChild 用来通过 Content Projection 方式 (ng-content) 设置视图中获取匹配元素...ViewChild 用来模板视图中获取匹配元素 父组件 ngAfterContentInit 生命周期钩子才能成功获取通过 ContentChild 查询元素 父组件

    11.1K120

    8-angular 要点温习-1

    如果引用是函数返回 true angular.isNumber() 如果引用是数字返回 true,如果输入框是input标签,要检测输入框内容是否为数字,则使用!...> 复制代码 4、怎么 angular 架构创建编译元素 添加新元素则需要通过编译实现,编译目的在于让添加脚本代码支持ng-?...$error.number 带有数量验证文本输入。也可以有最小和最大值附加属性。 $error.date 带有输入日期文本输入。 $error.url 带有输入验证URL文本输入。...$error.minlength,参数范围需inputng-minlength设置 $error.maxlength,参数范围需inputng-maxlength设置 $error.pattern...,正则表达式需inputng-pattern设置 $dirty 表单有填写记录 $pristine 表单没有填写记录 $valid 字段内容合法,如formname.

    3.3K40

    (转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

    首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 是如何使用。...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...,包括上面代码 formControl 指令,都会调用 setUpControl 函数来让表单控件和DefaultValueAccessor 实现交互(译者注:意思就是上面代码绑定 formControl...(译者注:作者先实现标准输入输出属性绑定通信方式,又要删除,主要是为了引入新表单组件交互方式,即 ControlValueAccessor。)

    3.8K20

    浅谈 Angular 项目实战

    目前三大主流前端框架都研究过,博客也有三者相关教程,最早接触是 React,但是并没有实际项目经验,只做过一些 Demo 。...} } Angular CLI 使用贯穿整个项目,开发到打包无处不在,这也是 Angular 工程化体现。...不过 Angular 模板驱动表单没有复选框多选绑定,如果有这个需求,可以选择更加灵活强大响应式表单进行数据绑定。其实,对于数组形式数据可以使用天然 select 多选框实现。...通过 Angular 响应式表单可以很容易实现。但是对于模板驱动表单也可以用另类方式实现,比如手动实现一个双向数据绑定,虽然有点麻烦,但却是可行。关于这个话题我放到下一篇文章说明。...官方文档关于表单内容非常详细,用户输入到绑定再到校验,比着葫芦画瓢就可以轻松实现双向数据绑定。

    4.6K00

    Angularjs基础(七)

    AngularJS表单     AngularJS表单输入控件集合 HTML控件     一下HTML input 元素被称为HTML 控件:         input 元素         ...novalidate 属性应用不是必须,但是你需要在 AngularJS 表单中使用,用于重写标准 HTML5 验证。...AngularJS输入验证     AngularJS表单和控件可以验证输入数据。 输入验证     AngularJS表单和控件可以提供验证功能,并对用户输入非法数据惊醒警告。...        $scope.email = 'john.doe@gmail.com';       })      实例解析     AngularJS ng-model 指令用于绑定输入元素到模型...表单没有填写记录 AngularJS API AngularJS 全局API     AngularJS 全局API 用于执行常见任务JavaScript 函数集合,       比较对象

    2K70

    如何使用AngularJS和PHP为任何位置生成短而独特数字地址

    输入此信息后,您API密钥将显示屏幕上。将其复制并存储可以轻松检索位置,因为稍后您需要将其添加到项目代码获取API密钥后,您可以通过创建MySQL数据库来开始构建应用程序基础。...索引像这样获取数据并按字母顺序存储一个单独位置,这意味着MySQL不必查看表每一行。它只需要在索引中找到您要查找数据,然后跳转到表相应行。...具体来说,我们将使用这些侦听器更改应用程序映射中显示位置,放置标记,并在用户表单输入信息时该位置周围绘制一个矩形。...保存此文件,然后再次访问您应用程序。状态字段输入US-NY然后单击TAB以将输入焦点更改为下一个字段。您将看到以下输出: 请注意,您在表单输入地理坐标和物理地址显示地图下方。...这是您需要进行最后一次更改,以便物理地址生成地图代码。保存并关闭该文件,然后再次浏览器刷新应用程序。输入您选择地址,然后单击“ 生成”按钮。

    13.2K20
    领券