开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular Form Array找不到带有路径的控件

Angular Form Array是Angular框架中的一个特性，用于处理表单中的动态控件集合。它允许我们在表单中动态添加、删除和修改控件。

在Angular中，表单是由FormGroup和FormControl组成的。FormGroup表示整个表单，而FormControl表示表单中的一个控件。而Form Array则是一种特殊的FormControl，它可以包含多个FormControl。

当我们使用Form Array时，我们可以通过路径来访问和操作其中的控件。路径是一个由数字和字符串组成的数组，用于指定控件在Form Array中的位置。

然而，有时候我们可能会遇到找不到带有路径的控件的情况。这可能是因为路径指定的控件不存在或者路径本身有误。

解决这个问题的方法有以下几种：

确保路径正确：检查路径是否正确指定了要访问的控件。路径应该是一个有效的数组，每个元素代表控件在Form Array中的位置。
检查控件是否存在：在访问控件之前，可以使用Form Array的at()方法来检查控件是否存在。at()方法接受一个索引作为参数，并返回该索引处的控件。如果返回的是null或undefined，则表示该控件不存在。
动态添加控件：如果找不到带有路径的控件，可能是因为该控件还没有被添加到Form Array中。在这种情况下，可以使用Form Array的push()方法或insert()方法来动态添加控件。

总结起来，当遇到Angular Form Array找不到带有路径的控件时，我们应该检查路径是否正确、控件是否存在，并且可以考虑动态添加控件来解决问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网套件：https://cloud.tencent.com/product/iot-suite
腾讯云移动开发：https://cloud.tencent.com/product/mobile-development
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/product/meta-universe

相关搜索:Angular => hasError不显示带有mat select的mat-form-field错误 Angular Reactive Forms:找不到具有路径的控件：Angular嵌套表单生成器给出“找不到带有路径的控件”错误 ANGULAR找不到具有以下路径的控件：'childrenFormArray -> [object Object] -> gender‘formcontrol中的Angular Form Array声明使用primeng form控件和angular reactive forms如何获得dropdown的值基于单选按钮选择的Angular form控件验证如何修复=> FormArray。找不到具有路径的控件如何在angular中获取form Array中的所有数据？如何处理Angular form控件之间的依赖关系？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

一、Overview angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。...在使用 ngModel 进行模板绑定时，angular 在 form 标签上自动附加了一个 NgForm 指令，因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素，而...4.2.3、数据的有效性验证某些时候需要对于用户输入的信息做有效性验证，此时可以在控件上添加上原生的 HTML 表单验证器来设定验证条件，当表单控件的数据发生变化时，angular 会通过指令的方式对数据进行验证...，通过给视图模板上的表单控件添加 formControl 属性绑定，从而将控件实例与模板中的表单控件关联起来 <label for...类的方式来简化的完成表单的构建 FormBuilder 服务有三个方法：control、group 和 array，用于在组件类中分别生成 FormControl、FormGroup 和 FormArray

18.9K2 0

AngularDart4.0 指南- 表单顶

一路上你将学习如何：用组件和模板构建一个Angular表单。使用ngModel创建读取和写入输入控制值的双向数据绑定。跟踪状态变化和表单控件的有效性。...您可以创造性地设计控件，将它们绑定到数据，指定验证规则和显示验证错误，有条件地启用或禁用特定控件，触发内置的视觉反馈等等。 Angular通过许多重复的，模板化的任务使处理过程变得简单。...这个表格中的三个字段中的两个是必需的。遵循材料设计准则，必填字段带有星号（*）。如果您删除了英雄名称，表单将以吸引人注意的风格显示验证错误： ?...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件，值是否改变，或者该值是否失效。...概要 Angular表单为数据修改，验证等提供支持。在此页面中，您学习了如何使用以下功能：一个HTML表单模板和一个带有@Component注解的表单组件类。

17.4K3 0

Angular2 ：从 beta 到 release4.0 版本升级总结

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。...]="{standalone: true}" /> 若要在[ngFormModel]属性的内使用#url="ngForm"来进行验证，需更改验证url.valad为mgform.controls.url.valid...使用angular-cli后无法自定义webpack的alias, 导致文件引入路径很长，如../../../shared/。.../// ，若路径不对文件找不到则无法启动。...解决办法：调整文件路径，或者删除这些内容。

8.1K0 0

Angular: 最佳实践

这很有用，因为当服务端提供一个 User 实例数据给你，它只能返回字符串类型的时间给你，但是你可能有一个 datepicker 控件，它将日期作为有效的 JS Date 对象返回，并且为了避免数据被误解...如果在你的 Angular 组件中有个表单，你可能有像这样的字段或者方法： @Component({ selector: 'component-with-form', template: `.....小经验：当我们在带有子元素的 HTML 元素上编写 ngFor 指令时，请考虑将该元素分离为单独的组件，就像下面： <div *ngFor="let user...示例可能很多，比如，你<em>的</em>一个组件中可能具有上传文件<em>的</em>功能，因此你需要将 JS File 对象<em>的</em> <em>Array</em> 转换为 FormData 实例来执行上传。...如果我们有更多<em>的</em>表单<em>控件</em>，那么它会使得视图更加混乱，并且创建了很多重复<em>的</em>逻辑。

2.8K4 0

8-angular 要点温习-1

var objs = [{a: 1}, {a: 2}]; angular.forEach(objs, function(data, index, array) { //data等价于array...":2} angular.forEach(objs, function(data, index, array) { //1 "a" {a: 1, b: 2} console.log...(data,index,array); }); 复制代码判断 JavaScript 对象类型 angular.isArray() || 如果类型是数组返回 true angular.isDate...> 复制代码 4、怎么在 angular 架构中创建编译元素添加新的元素则需要通过编译实现，编译的目的在于让添加的脚本代码支持ng-?...$error.number 带有数量验证的文本输入。也可以有最小和最大值的附加属性。 $error.date 带有输入日期文本输入。 $error.url 带有输入验证的URL文本输入。

3.2K4 0

Angular 6.x 表单快速入门

比较灵活适用于复杂的场景简化了HTML模板的代码，把验证逻辑抽离到组件类中手动创建 Form Model (同步) 方便的跟踪表单控件值的变化易于动态添加表单控件易于单元测试本文主要介绍...目前 Angular 支持的内建 validators 如下： required - 设置表单控件值是非空的 email - 设置表单控件值的格式是 email min - 设置表单控件值的最小值 max...- 设置表单控件值的最大值 minlength - 设置表单控件值的最小长度 maxlength - 设置表单控件值的最大长度 pattern - 设置表单控件的值需匹配 pattern 对应的模式...在 Angular 中，我们可以使用熟悉的标签来创建表单。...在 Angular 中表单控件有以下状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。

4.6K2 0

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径使用’@angular/forms’库中的FormGroup, FormControl，FormArray...)]来将表单的数据和和视图进行双向绑定，NgForm 指令为 form 增补了一些额外特性。...它会控制那些带有 ngModel 指令和 name 属性的元素，监听他们的属性。...max 此验证器要求控件的值小于等于指定的数字 required 此验证器要求控件具有非空值 requiredTrue 此验证器要求控件的值为真 email 此验证器要求控件的值能通过 email

2.8K5 0

Angular6自定义表单控件方式集成Editormd

ControlValueAccessor要处理的就是实现 Model -> View，View -> Model 之间的数据绑定，其具体的作用是：把 form 模型中值映射到视图中当视图发生变化时，...通知 form directives 或 form controls 该接口具体如下，已去掉其中的英文注释： export interface ControlValueAccessor { writeValue...：用来获取原生表单控件的值更新时通知Angular表单控件更新的函数（即，设置当控件接收到 change 事件后，调用的函数） registerOnTouched：用来获取通知用户正在交互的函数（即，设置当控件接收到...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件至于原生表单控件和Angular表单控件能够保持一致的原理，可以看下...4.x 自定义表单控件【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器，支持NgModel双向绑定

5.2K2 0

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

），你需要把更新的值传给这个回调函数，这样对应的 Angular 表单控件值也会更新（译者注：这一点可以参考 Angular 它自己写的 DefaultValueAccessor 的写法是如何把 input...下图是 Angular 表单控件如何通过 ControlValueAccessor 来和原生表单控件交互的（译者注：formControl 和你写的或者 Angular 提供的 CustomControlValueAccessor...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件（译者注：Angular 内置的 ControlValueAccessor）： Accessor Form Element..._isControlChanged(changes)) { setUpControl(this.form, this); 还有 setUpControl 函数源码也指出了原生表单控件和 Angular...组件封装器由于 Angular 为所有默认原生控件提供了控件值访问器，所以在封装第三方插件或组件时，需要写一个新的控件值访问器。

3.7K2 0

Angularjs基础(七)

AngularJS表单　　　　AngularJS表单时输入控件的集合 HTML控件　　　　一下HTML input 元素被称为HTML 控件：　　　　　　　　input 元素　　　　　　　　...AngularJS输入验证　　　　AngularJS表单和控件可以验证输入的数据。输入验证　　　　AngularJS表单和控件可以提供验证功能，并对用户输入的非法数据惊醒警告。...$invalid"> 　　　　　　　　　　　　　　　　　　　var app = angular.module('myApp',[]); 　　　　　　...以下列出了一些通用的 API 函数：　　　　　　angular.lowercase() 转换字符床为小写　　　　　　angular.uppercase() 转换字符串为大写...　　　　　　angular.isString() 判断给定的对象是否为字符串，如果是返回true.

2K7 0

3-进军 angular1.x 模型和作用域 scope

3-模型和作用域 scope angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器 ng-model ng-model...ng-app="" name="myForm"> 输入你的名字: ng-invalid-[key]: 由$setValidity添加的所有验证失败的值 ng-pristine: 控件为初始状态 ng-dirty:...控件输入值已变更 ng-touched: 控件已失去焦点 ng-untouched: 控件未失去焦点 ng-pending: 任何为满足$asyncValidators...scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

1.3K3 0

【AngularJS】 # AngularJS入门

通过内置的指令来为应用添加功能，可以自定义指令。指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序 3.1...."text" required> ng-empty 为空的时候 ng-not-empty 不为空的时候 ng-touched 控件已失去焦点 ng-untouched...控件未失去焦点 ng-valid 验证通过 ng-invalid 验证失败 ng-dirty 值改变的时候 ng-pending 任何为满足 $asyncValidators...的情况 ng-pristine 控件为初始状态 3.6. ng-repeat指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。...AngularJS 输入验证 form的name.input的name.

23.1K6 0

AngularJS 表单

AngularJS 表单是输入控件的集合。...---- HTML 控件以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 ---- 数据绑定 Input 控件使用...ng-model 属性的值为你在下拉菜单选中的选项：实例根据选中的下拉菜单选项，显示信息：选择一个选项: <option value...HTML 表单 HTML 表单通常与 HTML 控件同时存在。...> form = {{user}} master = {{master}} var app = angular.module('myApp',

3K2 0

Angular8稳定版修改概述

我认为这是gulp/grunt“旧时代”中的命令。基本上，构建器只是一个带有一组命令的函数，您可以createBuilder()从@angular-devkit/architect包传递给方法。...阅读Angular Doc上有关服务工作者的更多信息。表单改进添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。...如果要触发一个表单组中所有控件的验证，这个方法将是非常有用的。...之前我们不得不使用下面的代码片段来实现相同的功能： validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls...).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); } 从FormArray

4.5K2 0

Angular 2 表单（下）

修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型。...每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器。运行以上实例输出结果如下： {{diagnostic}} 只是用于测试时候输出数据使用。...状态为 true 时的类为 false 时的类控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效的 ng-valid...> 模板中通过把 div 元素的 hidden 属性绑定到 name 控件的属性，我们就可以控制"name"字段错误信息的可见性了。...通过 ngSubmit 来提交表单我们可以使用 Angular 的指令 NgSubmit 来提交表单，并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

1.6K1 0

PHP-文件上传优化

,''; //带有前缀 echo uniqid('goods_',true).strrchr($path,'.')...empty($_POST)) { $allow=array('.jpg','.png','.gif'); //允许的扩展名 $ext=strrchr($_FILES['face']['name'],...('image/jpeg','image/png','image/gif'); //允许的类别 echo in_array($mime,$allow)?'...'没有文件上传'; case 6: return '找不到临时文件'; case 7: return '文件写入失败'; default: return '未知错误.../uploads/{$foldername}"; //文件夹路径 if(!

2.8K1 0

ng 核心模块

这个函数在编写函数形式的代码时有用 angular.isUndefined 判断一个变量是未声明的 angular.isDefined 判断一个变量是已经声明的 angular.isObject 判断一个引用是否是一个对象...angular.module angular.module是一个全局的用于创建、注册、获取angular模块。所有的模块（核心模块或者是第三方的）可用需要应用使用这个机制注册了这些模块。...使用Angular标记类似于{{hash}}在一个href属性中，如果点击的时机早于Angular替换{{hash}}标记将导致连接到错误的URL。...使用Angular 标记例如{{hash}}在一个src属性中不能正确工作：浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。使用ngSrc指令可以解决这个问题。...使用Angular 标记例如{{hash}}在一个srcset属性中不能正确工作：浏览器将从带有{{hash}}的URL中获取资源直到Angular替换了这个表达式。

1.2K1 0

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。 ---- 输入验证在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。...AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。 ---- 应用代码 Validation Example <form ng-app="myApp" ng-controller="validateCtrl" name="myForm...$invalid"> var app = angular.module('myApp', []); app.controller('validateCtrl

1.2K3 0

【AngularJS】—— 5 表单

这部分，我们写一个表单程序，使用angularjs的检测并完成表单属性的获取与拷贝。　　...在AngularJS中，也支持html5中多种控件的自动检测，如：text、number、url、email、radio、checkbox等等。　　...可以通过anuglar.copy()自动拷贝form表单的数据。　　代码参考如下： <script src="http://apps.bdimg.com/libs/<em>angular</em>.js...使用save则把<em>form</em>中<em>的</em>数据保存到master中，使用reset就把master中<em>的</em>数据拷贝到<em>form</em>中。　　运行结果参考： ?

8185 0

HTML入门

表示：空元素带有属性的空元素带有内容的元素标题带有内容和属性标题... 实例：表单创建表单： ...... 元素:用来创建表单中的控件控件名 type 单行文本输入.../form.html">超链接超链接百度 <!

5991 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭