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

在Angular 9中使用ReactiveForm模块创建简单表单,但得到formGroup错误

在Angular 9中使用ReactiveForm模块创建简单表单时,如果出现formGroup错误,可能是由于以下几个原因导致的:

  1. 未正确导入ReactiveForm模块:首先,确保在使用ReactiveForm模块之前已经在你的组件中正确导入了该模块。在你的组件文件的顶部添加以下导入语句:
代码语言:txt
复制
import { FormGroup, FormControl } from '@angular/forms';
  1. 未在组件中创建FormGroup实例:在你的组件类中,需要创建一个FormGroup实例来表示整个表单。在组件类中添加以下代码:
代码语言:txt
复制
myForm: FormGroup;

constructor() {
  this.myForm = new FormGroup({
    // 在这里定义表单控件
  });
}
  1. 未在模板中正确绑定FormGroup:在你的模板中,需要使用formGroup指令将FormGroup实例与表单元素关联起来。确保在表单元素的外层元素上添加formGroup指令,并将FormGroup实例绑定到该指令上。例如:
代码语言:txt
复制
<form [formGroup]="myForm">
  <!-- 在这里添加表单控件 -->
</form>
  1. 未在模板中正确绑定FormControl:在FormGroup实例中,需要定义表单控件并将其与模板中的表单元素绑定。在FormGroup实例中添加FormControl实例,并将其与表单元素的formControlName属性进行绑定。例如:
代码语言:txt
复制
this.myForm = new FormGroup({
  username: new FormControl(''),
  password: new FormControl('')
});
代码语言:txt
复制
<form [formGroup]="myForm">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
</form>

以上是解决在Angular 9中使用ReactiveForm模块创建简单表单时可能出现formGroup错误的一些常见原因和解决方法。希望对你有所帮助。

关于Angular的ReactiveForm模块的更多信息和详细介绍,你可以参考腾讯云的文档:Angular ReactiveForm模块

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

相关·内容

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

响应式表单 建立表单 由组件隐式的创建表单控件实例 组件类中进行显示的创建控件实例 表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...name 属性则是 angular 用来注册控件的 key,所以表单使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 表单使用 ngModel...4.3、响应式表单 4.3.1、快速上手 响应式表单依赖于 ReactiveFormsModule 模块,因此使用前需要在根模块中引入 import { BrowserModule } from '@...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理 使用 FormGroup 时,同样组件中定义一个属性用来承载控件组实例...模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

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

    首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应的几种状态...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验 一个最简单的例子...; Submit()函数内,点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段的值!.../core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单的一些特性 import { Router

    3.8K20

    Angular进阶:理解RxJSAngular应用中的高效运用

    Angular应用中,RxJS的高效运用主要体现在:异步操作处理RxJS的核心优势在于处理异步操作,如HTTP请求、定时任务、事件监听等。...Angular中,你可以使用HttpClient模块配合RxJS的Observable来发起HTTP请求,这使得请求和响应的管理变得简洁且易于理解。...RxJS提供了强大的错误处理机制,如catchError操作符,可以用来捕获并处理Observable中的错误,甚至可以结合retry操作符实现请求重试。...Angular的响应式表单中,RxJS可以帮助你处理表单输入的验证、值的变化监听等,使得表单逻辑更加清晰。...import { FormBuilder, FormGroup, FormControl } from '@angular/forms';import { debounceTime } from 'rxjs

    17110

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

    Rx 中这种数据的转换再容易不过了,最常用的一个就是 map 转换操作符,接着上面的代码继续来一个 map 函数,这里使用了 momentjs 的按当前日期减去刚刚的以天数为单位的年龄值,就得到一个大概估算的出生日期...响应式表单中的 Rx Angular表单处理非常强大,有模版驱动的表单和响应式表单两类,两种表单各有千秋,不同场合可以分别使用,甚至混合使用这里就不展开了。...我们这里使用了响应式表单,也非常简单,就是一个 form 里面 3 个控件,这里我采用了官方的 Material 控件,如果你觉得不爽,可以直接用基础的 HTML 控件搭配样式即可。...Angular 中处理响应式表单只有 3 个步骤: 1、组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...这个 valueChanges 返回的其实就是一个 Observable ,见下面的 TypeScript 定义: 既然我们得到了这个原始数据流,剩下的工作就比较简单了。

    5.2K10

    Angular: 最佳实践

    应用程序的 tsconfig.json 文件中,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定它无法推断变量的类型,而认为是 any 类型。...注意我们是怎么组件类上创建一个 statuses 字段,以便我们可以模版中使用这个枚举。但是假如我们多个组件中使用这个枚举呢?或者假如我们要在不同的组件使用其他枚举呢?我们需要不停创建这些字段?...Angular 表单,那么将这些逻辑移动到一个基础类会更友好...但是你不需要继承 AbstractBaseComponent,因为不是每个组件都有 form 表单。...onSubmit() { super.onSubmit(); // continue and perform the actual logic } } 复制代码 现在,我们为使用表单的组件创建了一个单独的类...如果我们有更多的表单控件,那么它会使得视图更加混乱,并且创建了很多重复的逻辑。

    2.8K40

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件

    2.8K50

    Angular17 使用 ngx-formly 动态表单

    快速开始 创建 Angular 项目: 安装并执行 CLI 创建 Angular 项目 # 基于 Angular 17 版本演示 # 注意要将 Nodejs 版本切换至 18.13+ npm install...选择创建项目的模板: sidemenu ng add ng-zorro-antd 安装 Formly 核心模块: 推荐使用 angular-cli 提供的 ng add 进行安装配置: # 可选主题包括...Formly 实现新用户注册: 第一步:页面级组件的模块中导入必要的三个模块: ReactiveFormsModule:响应式表单核心模块; FormlyModule.forChild():Formly...; 使用 Formly 内置验证: 新用户注册表单的基础上增加输入年龄字段的配置,再为每个字段配置的 props 增加 required 属性,表示这是一个必填的字段,就像新用户注册表单中用户名字段一样...; 创建自定义 Wrapper 自定义 Wrapper 同样也是一个组件,需要继承自 FieldWrapper 类,这样实现了一个简单包装字段的 Wrapper: # 创建 card-panel 组件

    56510

    Angular 结合 NG-ZORRO 快速开发

    使用 ng-zorro 中 modal 组件 对 ng-zorro 组件按需引入 调整路由文件 按照思路,我们得 ng-zorro 引入: // app.module.ts import { ReactiveFormsModule...NzFormModule, ReactiveFormsModule, NzInputModule ], 简单易理解原则,我们这里不使用 children 进行路由的嵌套: // app.routing.module.ts...上面完成后,我们得到列表信息如下: image.png 新增用户和编辑用户 我们简单建立个表单,里面含有的字段就两个,分别是 name 和 position。...这两个功能是公用一个表单的~ 我们 html 中添加: // user-info.component.html <form nz-form [formGroup]="validateForm" class...// user-info.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup

    1.8K10

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

    Angular 团队提到,View Engine 将在后续版本中被彻底移除。目前使用 View Engine 的库仍可与 Ivy 应用配合使用开发团队建议各位库作者提早向 Ivy 过渡。...基于此,Angular 12 启动了加速转移计划,官方移除 View Engine,并且禁止使用 View Engine 创建应用程序的功能,而且新函数库专案将默认使用 Ivy。...现在,运行 ng build 将默认使用生产版本,可节约操作步骤并防止您意外将开发版本部署至应用当中。 默认情况下,CLI 将启用严格模式以捕捉开发早期的各种错误。...新版本中,您可以通过 BrowserAnimationsModulewithConfig 禁用动画。 向 FormArray 与 FormGroup 中引入 emitevent 选项。... HttpParams 上实现了 appendAll()方法。 表单中,引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。

    4.4K10

    Angular8稳定版修改概述

    下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本。 新功能 差分加载 根据您的browserlist 文件,构建期间,Angular将为其创建单独的包polyfills。...使用此功能将减小捆绑包大小。 ? 这是如何工作的? 基本上,Angular使用polyfill构建其他文件,并且它们将注入nomodule 属性。...Bazel将提供以下优势: 更快的构建时间(对于第一次构建需要时间,并发构建将更快),Angular已经使用它,现在CI7.5分钟内完成,而不是Bazel之前的60分钟。...懒加载的变动 新版本不推荐使用loadChildren:string 懒惰加载模块的语法。 8.0.0之前,懒加载的使用方法如下: loadChildren: '....一个域中支持多个应用。 阅读Angular Doc上有关服务工作者的更多信息。 表单改进 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。

    4.5K20

    当nz-checkbox-group多选框组遇上必选校验

    当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group...,最开始用的是响应式表单的验证+响应式表单的验证,结果总是无法达到预期效果。...刷了n+1遍ng-zorro-antd的官方文档的表单部分后,“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, 的...(pending) | warning | success状态,具体使用方式建议参照本demo ----- NG-ZORRO表单一节的文档 本着死马当活马医的心点开里面的dome,仔细看了下,同时实例上试了一下...this.validateForm.controls[name]; } _submitForm() { this.validateForm.value.one = this.selectedOne; } //创建自定义校验规则

    4.3K20

    Angular快速学习笔记(4) -- Observable与RxJS

    开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。 complete 可选。用来处理执行完毕(complete)通知。...使用 Observable 构造函数可以创建任何类型的可观察流。...除了可以订阅时提供 error() 处理器外,RxJS 还提供了 catchError 操作符,它允许你管道中处理已知错误。...HTTP 模块使用可观察对象来处理 AJAX 请求和响应 路由器和表单模块使用可观察对象来监听对用户输入事件的响应 事件发送器 EventEmitter Angular 提供了一个 EventEmitter...如果使用承诺和其它跟踪 AJAX 调用的方法会非常复杂,而使用可观察对象,这非常简单: import { pipe, range, timer, zip } from 'rxjs'; import {

    5.1K20

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    如果您是从头开始创建一个新组件,并忘记向NgModule添加一个新模块尝试将其添加到您的标记中,那么您的应用程序将无法使用JS控制台中的下一个错误: Uncaught Error: Template...使用表单 Angular使用表单有两种方法 - 一种是模板驱动的,我们已经使用其中最有价值的部分:ngModel用于双向绑定。但是Angular的形式不仅仅关于模型的价值,也关系到有效性。...使用模板驱动的表单与以前使用简单的HTML表单完全相同。如果我们需要更复杂的东西,那么Angular中有一种不同的形式:反应式。我们将介绍转换表单后他们的反应。...POST例如,我们要求浏览器创建一个承诺。RxJS使用Observable来处理事件流。想想像这样:我们刚刚实现了我们的表单发生变化时调用的代码。...,我们告诉Angular不要为我们的模块创建单独的目录。

    42.6K10

    炫酷!纯Python开发LOL英雄信息查询平台

    图1 2 Dash表单控件进阶 我们在上一期教程中已经对常见的几种具有不同功能的表单控件进行了比较详细的介绍,而在正式的开发网页表单时,不仅仅是将表单控件排列摆放出来那么简单随意,我们往往需要为控件添置一些补充内容...,从而更好地引导用户使用它们,或是扩充出更多功能,这在Dash中我们可以借助dash_bootstrap_components的力量: 2.1 利用Form()、FormGroup()更好地组织表单 dash_bootstrap_components...中的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构中,使得这些控件布局上自成一体非常方便。...参数,只不过这里我们同一个FormGroup()中为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: ❝app2.py ❞ import

    1K20

    (数据科学学习手札113)Python+Dash快速web应用开发——表单控件篇(下)

    我们在上一期教程中已经对常见的几种具有不同功能的表单控件进行了比较详细的介绍,而在正式的开发网页表单时,不仅仅是将表单控件排列摆放出来那么简单随意,我们往往需要为控件添置一些补充内容,从而更好地引导用户使用它们...中的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构中,使得这些控件布局上自成一体非常方便。   ...参数,只不过这里我们同一个FormGroup()中为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: app2.py import...  除了前面介绍的利用dbc.FormText()等部件为对应的表单控件生成外部说明文字之外,dash_bootstrap_components还提供了基于InputGroup()的一系列部件,使得我们可以方便地创建出与控件本身浑然一体的说明内容

    1.1K20
    领券