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

类型‘AbstractControl’上不存在属性'controls‘。“

类型‘AbstractControl’上不存在属性'controls‘。这个错误通常出现在使用Angular框架进行表单验证时。它表示在尝试访问表单控件的'controls'属性时发生了错误。

解决这个问题的方法是确保你正在访问的控件是一个FormGroup或FormArray类型的控件,因为只有这些类型的控件才有'controls'属性。如果你尝试访问的控件是一个FormControl类型的控件,它是没有'controls'属性的。

要解决这个问题,你可以按照以下步骤进行操作:

  1. 确保你的表单控件是一个FormGroup或FormArray类型的控件。你可以通过在组件类中创建一个FormGroup或FormArray实例来实现这一点。例如:
代码语言:txt
复制
import { FormGroup, FormControl, Validators } from '@angular/forms';

// 创建一个FormGroup实例
myForm: FormGroup = new FormGroup({
  myControl: new FormControl('', Validators.required),
});
  1. 确保你在模板中正确地引用了表单控件。你可以使用表单控件的名称来访问它的'controls'属性。例如:
代码语言:txt
复制
<form [formGroup]="myForm">
  <input formControlName="myControl">
</form>

在这个例子中,'myControl'是FormGroup中的一个控件,你可以通过'myForm.controls.myControl'来访问它。

  1. 如果你正在使用FormArray类型的控件,你可以使用索引来访问其中的控件。例如:
代码语言:txt
复制
<form [formGroup]="myForm">
  <div formArrayName="myArray">
    <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
      <input [formControlName]="i">
    </div>
  </div>
</form>

在这个例子中,'myArray'是一个FormArray类型的控件,你可以通过索引来访问其中的控件。

总结一下,当出现类型‘AbstractControl’上不存在属性'controls‘的错误时,你需要确保你正在访问的控件是一个FormGroup或FormArray类型的控件,并且在模板中正确地引用了它。如果你遵循了这些步骤,你应该能够解决这个问题。

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

相关·内容

Angular17 使用 ngx-formly 动态表单

Angular 项目 # 基于 Angular 17 版本演示 # 注意要将 Nodejs 版本切换至 18.13+ npm install -g @angular/cli # 创建为 standalone 类型的项目...内置验证、自定义验证消息及自定义验证函数三大块,自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册,在不同的场景可以考虑不同的自定义方式; 使用 Formly 内置验证: 在新用户注册表单的基础增加输入年龄字段的配置...model.password', }, } PS:hide 是框架显示提供的属性,props.disabled 是继承自组件的属性; 强制显示错误状态: 使用 formState 可以实现字段之间的通信...self-adaption', extension: selfAdaptionExtension, priority: 100, }, ], }) PS:注册扩展后,绑定到每个字段的...label 属性就不再需要了;

56810
  • HTML5音频audio详解

    直到现在,仍然不存在一项旨在网页播放音频的标准。 目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。... <source src="http://www.w3school.com.cn/i/song.ogg"...浏览器将使用第一个可识别的格式 支持的部分属性列举: 4、autoplay 是否自动播放。 属性 值 描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。...controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束时重新开始播放。...preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 src url 要播放的音频的 URL。

    3.1K20

    HTML5视频video

    直到现在,仍然不存在一项旨在网页显示视频的标准。 目前,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。...DOCTYPE HTML> <source src="movie.ogg...浏览器将使用第一个可识别的格式 支持的部分<em>属性</em>列举: <em>属性</em> 值 描述 autoplay autoplay 如果出现该<em>属性</em>,则视频在就绪后马上播放。...<em>controls</em> <em>controls</em> 如果出现该<em>属性</em>,则向用户显示控件,比如播放按钮。 height pixels 设置视频播放器的高度。...loop loop 如果出现该<em>属性</em>,则当媒介文件完成播放后再次开始播放。 preload preload 如果出现该<em>属性</em>,则视频在页面加载时进行加载,并预备播放。

    1.7K31

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

    name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...formGroup 指令绑定到 form 元素,然后将控件组的每一个属性通过 formControlName 绑定到具体对应的表单控件 <form [formGroup]='profileForm'...{ constructor() { } /** * 对指定的控件执行同步验证方法 * @param control 控件 */ validate(control: AbstractControl...class CrossFieldValidateDirective implements Validator { constructor() { } validate(control: AbstractControl

    18.9K20

    【愚公系列】2023年11月 Winform控件专题 TableLayoutPanel控件详解

    要使用TableLayoutPanel控件,需要在Visual Studio设计器中将其拖放到窗体,并设置其属性。...以下是使用RowStyles属性的步骤:打开Winform窗体设计器,在工具箱中找到TableLayoutPanel控件并拖拽到窗体。...对于每个行样式,可以设置以下属性:- SizeType: 行大小的类型,可选择Absolute、AutoSize、Percent三种。- Height: 行高度的值,可以设置为具体的像素值或百分比。....RowStyles.Add(new RowStyle(SizeType.Percent, 33.4f));//添加第三行,行类型为百分比,大小为33.4% tableLayoutPanel1.Controls.Add...功能分组:根据不同的功能,使用TableLayoutPanel将相应的控件分组,并布局在不同的面板,以便于用户快速找到所需的功能。

    1.4K11

    动态加载控件

    用户控件用Loadcontrol,而普通控件则是新建对象,再加入到Controls中 2、可以加到各级容器的Controls中 3、定位通过对style的修改来完成。...但在将页回发到服务器时,先在 Page.Init 事件中实例化非动态控件(在页定义)并加载视图状态信息,然后才能重新创建(通常在 Page_Load 处理程序中)动态控件。...在发送页并加载视图状态时,动态控件还不存在;因此,视图状态中的附加信息将不会对应于正确的控件。结果通常是出现表明存在无效强制转换的错误。...如果您在每次往返期间重新插入,则每次动态创建的控件都将从上述控件集的视图状态中选取属性值。在很多情况下,可以通过将容器控件的 EnableViewState 属性设置为 false 来避免此问题。...在本例中,将不会保存有关动态控件的任何信息,并且与后续版本的控件之间不存在任何冲突。 http://msdn.microsoft.com/library/chs/default.asp?

    2K70

    win10 uwp 验证输入 自定义用户控件 Nuget使用库判断输入字符长度是否要检查长度判断如何写检查用户控件

    set; } 开始核心ValidationRule,我们有很多检查,我们需要一个ValidationRule,定义的检查都可以修改ValidationRule新检查 ValidationRule只有一个属性..._errorMessage; } } 其实如果_errorMessage不存在,我们要返回默认的,不要返回”Field invalid.” ///...ValidationTextBlock这两个,我们给 xaml 写的资源名字 RemainingCharacters,ValidationText ,我们就可以在 OnApplyTemplate 获得这两个属性...this.GetTemplateChild("ValidationText") as TextBlock; } 但我们需在ValidatingTextBox 的类上面写下面的代码,告诉 xaml 需要有这两个属性...,做界面只要知道有那些控件就好 TemplatePart 是告诉做界面,我的需要名字为 Name,类型为什么的控件,你要做前台写这个控件。

    2.6K30

    HTML5的Video标签详细说明手册

    2.5 controls属性 Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。 控制栏须包括播放暂停控制,播放进度控制,音量控制等等。 ?...浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。...Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值,请参见W3C的文档。 ?...3.12 controls、volume、muted属性 三者均为可读写属性。...空字符串:浏览器不支持此种媒体类型; maybe:浏览器可能支持此种媒体类型; probably:浏览器确定支持此种媒体类型

    2K20

    HTML5 标签audio添加网页背景音乐代码

    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束时重新循环开始播放。...preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 src url 要播放的音频的 URL。...解决方案:使用三种文件类型和标签 鉴于目前的状况,您可能认为目前还不是在 HTML5 页面上使用音频的黄金时刻。...假设您是一个瓦格纳迷,想在 HTML5 网页听他的歌剧 Ride of the Valkyries(《女武神》)。首先,您需要获得三种文件类型的音乐,即 OGG、MP3 和 WAV。...图1:不同浏览器的音频控件 除了 Chrome 浏览器外,所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还显示声音文件的总秒数。

    11.3K31

    了解模板化控件(10):原则与技巧

    使用依赖属性:控件的使用者会认为所有控件的属性都是可以绑定的,除非有特殊理由不要破坏这个约定俗成的规则。...以父类型的名字作为后缀,如RepeatButton。 使用常用的后缀,如-Control、-Box、-Item、-View、-Viewer、-Bar。...3.1 partial class 在编写模板化控件时,依赖属性最大的缺点会暴露无遗:它太复杂了。...一个完整的依赖属性定义可以有20行(属性标识符、属性包装器、PropertyChangedCallback等),而且其中一部分是静态的,另外一部分不是,在类中将一个依赖属性的所有部分放在一起,还是按静态...这个系列的内容有很多来自于WPF/Silverlight的经验,虽然有一些小出入,基本可以用在WPF的自定义控件。

    88330

    QT4C-Windows自动化测试框架正式开源

    03 支持控件类型扩展 QT4C具有良好的扩展性,支持用户根据实际需求对控件类型进行扩展,支持多种使用场景,用户可以针对自研控件实现测试桩注入逻辑,通过扩展新的控件类型对自研控件进行UI自动化测试。...04 支持PC端的Web自动化测试 QT4C对于Windows端的浏览器同样进行了封装,用户可以在QT4C的基础使用QT4W进行Web自动化测试,同样支持Win32应用的内嵌Web自动化测试。...目前QT4C已经对IE浏览器、Chrome浏览器进行了封装,用户可以直接在Windows使用上述浏览器进行Web自动化测试。 设计原理 ?...QT4C对每一种控件类型都内置了Proxy Object,用于获取应用程序的属性或者进行操作,Proxy Object底层基于注入测试桩或调用被测程序提供的API来封装获取属性或操作的接口。 ?...['按键1'].click() self.Controls['加号'].click() self.Controls['按键2'].click() self.Controls['等号']

    3.1K32

    微信小程序官方组件展示之媒体组件audio源码

    以下将展示微信小程序之媒体组件audio源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。功能描述:音频。...属性说明:属性类型默认值必填说明最低版本idstring否audio 组件的唯一标识符1.0.0srcstring否要播放音频的资源地址1.0.0loopbooleanFALSE否是否循环播放1.0.0controlsbooleanFALSE...否是否显示默认控件1.0.0posterstring否默认控件的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效1.0.0namestring未知音频否默认控件的音频名字...,如果 controls 属性值为 false 则设置 name 无效1.0.0authorstring未知作者否默认控件的作者名字,如果 controls 属性值为 false 则设置 author...audio.wxml --><audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls

    54750
    领券