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

Angular 5-模板错误:“类型‘AbstractControl’上不存在属性'length‘”

这个错误是由于在Angular 5中,AbstractControl类没有length属性引起的。AbstractControl是Angular表单中的一个抽象类,用于表示表单控件的基本行为。

解决这个错误的方法是使用AbstractControl的其他属性或方法来替代length属性。具体取决于你在模板中使用length属性的目的。

如果你想获取表单控件的值的长度,可以使用value属性和length属性来获取。例如,如果你有一个表单控件的名称为myControl,你可以使用以下代码来获取其值的长度:

代码语言:txt
复制
{{ myControl.value.length }}

如果你想检查表单控件的值是否满足一定的长度要求,可以使用Validators.minLength(minLength)验证器来实现。例如,如果你想要一个最小长度为5的输入框,你可以在表单控件的验证器中使用Validators.minLength(5)。示例代码如下:

代码语言:txt
复制
import { Validators } from '@angular/forms';

// ...

myControl = new FormControl('', Validators.minLength(5));

这样,当输入框的值长度小于5时,表单控件将被标记为无效。

关于Angular表单的更多信息,你可以参考腾讯云的产品文档:Angular表单

请注意,以上答案仅针对Angular 5版本,如果你使用的是其他版本的Angular,可能会有不同的解决方法。

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

相关·内容

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

在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...,将承接 FormGroup 实例的属性通过 formGroup 指令绑定到 form 元素,然后将控件组的每一个属性通过 formControlName 绑定到具体对应的表单控件 <form [formGroup...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

Angular快速学习笔记(3) -- 组件与模板

显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...实际,在渲染视图之前,Angular 把这些插值表达式翻译成相应的属性绑定。...在这种模式下,有类型的变量默认是不允许 null 或 undefined 值的,如果有未赋值的变量,或者试图把 null 或 undefined 赋值给不允许为空的变量,类型检查器就会抛出一个错误 Angular...该方法接受当前和属性值的 [SimpleChanges](https://angular.cn/api/core/SimpleChanges) 对象当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在.../app.component.scss'] }) 6.属性指令 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

15.2K30

给Java程序员的Angular快速指南 | 洞见

这时候要注意多和 BA、UX、DBA 等沟通,以确保你的理解不存在方向性错误,不要太沉迷细节,防止见木不见林。...TypeScript 的类型只存在于编译期 TypeScript 的一个首要设计约束就是要兼容 ES5/6,因此不能随意增加基础设施,而像 Java 这种级别的类型支持在原生 JavaScript 中是根本不存在的...语法,装饰器名字后面必须带括号,不能像注解那样省略。 不过,在 Angular 中,TypeScript 装饰器的实际用途就是为类或属性添加注解而已。...比如,如果两个类(或接口)的属性和方法(名称、类型)都完全一致,那么即使它们没有继承关系,也可以相互替代(但如果类有私有属性,则不能,就算两者完全一样也不行)。...模板语法 虽然看起来奇怪,但 [prop]、(click)、*ngFor 等模板语法中的特殊符号都是完全合法的 HTML 属性名,实际属性名中只禁用各类空白字符、单双引号等少数几个显而易见的无效字符

2.4K42

AngularDart4.0 指南- 模板语法一 顶

binding to the classes property 从技术讲,Angular将名称与指令输入或用@Input()装饰的属性相匹配。...这样的输入映射到指令自己的属性。 如果名称未能匹配已知指令或元素(property)的属性,则Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式的评估必须没有可见的副作用。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...在检查模式下,如果模板表达结果类型和目标属性类型不是赋值兼容的,则会抛出一个类型异常。...记住括号 括号告诉Angular评估模板表达式。 如果省略方括号,Angular会将该字符串视为常量,并使用该字符串初始化目标属性。 它不评估字符串! 不要犯以下错误: <!

5.1K10

前端MVC学习总结(二)——AngularJS验证、过滤器、指令

一、验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素添加相应的ng属性,常见的如下所示: <input Type="text" ng-model="" [name=...这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。 Angular中的MVC组件有: 模型 — 模型是一个域的属性集合;域被附加到DOM,通过绑定来存取域属性。...视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。 控制器 — ngController指令声明一个控制器类;该类包含了业务逻辑,在应用后台使用函数和值来操控域中的属性。...注意,你也能使用$route服务定义一个路由来将控制器附加到DOM。一个常见错误是在模板再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。...内部包含: 先定义模板,指定id与类型模板中可以是任意片段: 引用模板模板中可以使用angular表达式,引用的方法与外部包含一样

15.4K60

angular面试题及答案_angular面试

双向数据绑定的原理 data => view:数据绑定,模板语法 [ ] view => data: 事件绑定,模板语法() angular的双向数据绑定就是 数据绑定 + 事件绑定 ,模板语法 [...当observable或promise返回data时,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...1、渲染得更快   2、需要的异步请求更少   3、需要下载的Angular框架体积更小   4、提早检测模板错误   5、更安全 JIT优势   编译时间短,除非确实有动态组件的需求,否则...此功能用于更改模板的输出;比如将字符串更改为大写并在模板显示它。它还可以相应地更改日期格式。...列举一下Angular中的filter类型 Currency. Date. Filter. Json. limitTo lowercase number orderBy 30.

11K120

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...用插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。 使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。...您可以使用模板属性内联定义它,也可以使用组件元数据@Component注解的templateUrl属性链接到单独定义模板的HTML文件。...使用Hero类 导入Hero类后,AppComponent.heroes属性可以返回一个Hero对象的类型列表:lib/app_component.dart (heroes) List heroes...在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。 双引号内的模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。

5.3K10

AngularDart4.0 指南-体系结构概述 顶

实际,HeroListComponent实际只是一个类。 直到你告诉Angular它是一个组件。要告诉Angular HeroListComponent是一个组件,请将元数据附加到该类。...一个组件是一个指令与模板; 一个@Component注解实际是一个@Directive注解,扩展了面向模板的特性。...虽然组件在技术是指令,但组件对于Angular应用程序来说是非常独特和重要的,所以这种架构概述将组件与指令分开。 还有其他两种指令:结构和属性指令。...属性指令会改变现有元素的外观或行为。 在模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。...Angular使用依赖注入来为新组件提供他们需要的服务。 Angular可以通过查看构造函数参数的类型来判断组件需要哪些服务。

7.9K30

AngularDart4.0 指南- 表单 顶

一路你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令在表单注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...如果需要,可以将相同类型错误消息添加到中,但这不是必须的,因为选择框已经将权限限制为有效值。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素定义一个模板引用变量。 在多处的按钮中引用该变量。...输入控件(通过模板引用变量访问)的valid 属性,用于检查控件有效性以及显示/隐藏错误消息。 NgForm.form的有效性来设置提交按钮的启用状态。

17.5K30

移除 View Engine 转用 Ivy,盘点Angular 12的重要更新

为了确保 Angular 能够提供良好的类型检查、快速侦测变更,Angular 官方团队一直在调整静态检查和动态构建的平台。...事实,从 Angular 9 开始,新的 Angular 应用程序就默认启用 lvy。...对于语言服务,新版本仅在模板中提供 Angular 属性补全功能。 对于 compiler-cli,新版本为请求提供 context 选项以保障属性数据的类型安全。...APP-INITIALIZER 令牌的类型有所变更,旨在准确反映 Angular 处理的返回值类型。同样属于重大变化。...新的补丁添加一项 API,用于在文件位置检索某一模板模板类型检查块(如果有),并选定 TCB 中与发出 TCB 请求的模板节点相对应的 TS 节点。这项功能有助于提高调试效率。

4.4K10

Angular快速学习笔记(2) -- 架构

组件和服务都是简单的类,这些类使用装饰器来标出它们的类型。...Angular充分利用了装饰器(java里的annotation)来标识类的类型,并在装饰器中提供元数据(metadata)来告知ng如何使用它们。...NgModule更像一个逻辑的概念,是一个软件包的概念。 1.1.4 Angular官方库 Angular 自带了一组 JavaScript 模块,你可以把它们看成库模块。...在模板中,它们看起来就像普通的 HTML 属性一样,因此得名“属性型指令”。...如果所请求的服务尚不存在,注入器就会使用以前注册的服务提供商来制作一个,并把它加入注入器中,然后把该服务返回给 Angular。 ? 对于要用到的任何服务,你必须至少注册一个提供商。

5.2K20

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

@angular/core会创建组件,渲染它,创建并呈现它的后代。当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...ngOnChanges:当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。 ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。...在某些情况下,我们需要通过向现有类型提供一些更多的属性来扩展现有类型,或者如果我们需要定义其它类型以避免TypeScript警告。...AOT编译代表的是Ahead Of Time编译,其中Angular编译器在构建时,会将Angular组件和模板编译为本机JavaScript和HTML。...在构建时检测错误:由于预先编译,可以检测到许多编译时错误,能够为应用程序提供更好的稳定性。

17.3K80

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例,来一步步介绍自定义属性指令的相关知识。...这里有个问题,当用户在输入框输入非数值类型的时候,我们希望能提醒用户。最简单的方式,就是给当前输入框设置一个红色的边框。要实现这个功能,我们可以利用 HostBinding 装饰器。...针对这个问题,我们可以在定义指令时,设置 exportAs 属性: @Directive({ selector: '[tooltip]', exportAs: 'tooltip' }) 之后,我们就可以在模板中...Angular 表单模块中,也大量使用了 exportAs 属性,比如 ngModel、ngForm、ngModelGroup 及 formControl 指令等。...本文通过 CreditCardDirective 和 TooltipDirective 两个指令,介绍了 Angular 自定义属性指令所涉及的相关的基础知识,若想继续深入学习的话,可以阅读 Angular

2K30
领券