Angular 6:无法绑定到“formGroup”,因为它不是“form”的已知属性?

2024-04-10

我曾在 Angular 2/4 中使用过表单生成器,但现在我在 Angular 6 中使用它。我看到了这个问题(无法绑定到“formGroup”,因为它不是“form”的已知属性 https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form)但它是针对角度 2 的。 我对 Angular 4 做了完全相同的事情,但我收到了这个错误。请帮忙: 我的代码是:

app.module.ts:(我已导出 FormsModule 和 ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,LoginComponent,ForgotComponent
  ],
  imports: [
    BrowserModule,
    routing,

  ],
  providers: [
    LocalStorage,
  ],
  bootstrap: [AppComponent],

})
export class AppModule { }

登录.组件.ts:

import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
@Component({
    selector: 'login-app',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})

/**
 * LoginComponent class
 */

export class LoginComponent {
    private loginForm: any;
    loginValue:any;

    constructor(
        private formBuilder: FormBuilder,
        private _router: Router,
        private httpService: HttpService,
        private localStorage: LocalStorage,
    ) {
        this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
        });
    }
}

login.component.html:(类似这样的)

 <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>

 <input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control">

<div class="col-12">
 <input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
 </div>

 <button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block">
            <div  *ngIf="!loading" class="sign-in">Sign in</div>
  </button>

  </form>

在您的中添加以下代码app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

并在导入数组中:

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ]

The FormGroup https://angular.io/api/forms/FormGroup是一个选择器FormGroupDirective https://angular.io/api/forms/FormGroupDirective主要用于绑定现有的指令FormGroup https://angular.io/api/forms/FormGroup到 DOM 元素并且FormGroupDirective https://angular.io/api/forms/FormGroupDirective可以在ReactiveFormsModule https://angular.io/api/forms/ReactiveFormsModule module.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 6:无法绑定到“formGroup”,因为它不是“form”的已知属性? 的相关文章

  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向
  • 从 Javascript 中的嵌套函数返回值[重复]

    这个问题在这里已经有答案了 考虑这段代码 缩短 function getSecret db transaction function transaction transaction executeSql SELECT FROM table
  • 使用 JavaScript 格式化日期

    JavaScript 中的日期格式有问题 这是我的函数代码 originalDate 2016 03 02 09 12 14 989522 var d new Date originalDate month d getMonth 1 day
  • 如何在javascript中动态向对象数组添加值?

    这是一个对象数组 var data label 1 value 12 label 1 value 12 label 1 value 12 label 1 value 12 我如何动态地为这些添加值 我尝试了以下代码但没有成功 var lab
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • 返回上一页

    我正在使用表格来 评价 页面 此表单将数据 发布 到其他地方的 php 脚本 我只是想在处理表单后显示一个链接 这将使用户返回到上一页 我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
  • jQuery UI Datepicker 奇怪的行为

    我在使用 jqueryUI 使用简单的日期选择器时遇到了一个奇怪的问题 我只想显示两个月的日历 包括上个月和当前月份 我使用了这段代码 function picker datepicker numberOfMonths 2 showCurr
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • Node.js Express 4.0 中的 res.render 回调参数的用途是什么?

    目的是什么res render回调参数 在什么情况下 由于模板已被指定为第一个参数 因此人们会想要使用这样的回调参数 这是文档中的代码 send the rendered view to the client res render inde
  • fadeOut() 和slideUp() 同时进行?

    我已经发现jQuery 淡出然后滑动 https stackoverflow com questions 734554 jquery fadeout then slideup这很好 但不是那个 我怎么能够fadeOut and slideU
  • 如何在 JavaScript 中将变量的内容写入文件[重复]

    这个问题在这里已经有答案了 可能的重复 firefox 如何启用本地 JavaScript 来读取 写入我的 PC 上的文件 https stackoverflow com questions 2846045 firefox how to
  • Javascript:我应该隐藏我的实现吗?

    作为一名 C 程序员 我有一个习惯 将可以而且应该私有的东西设为私有 当 JS 类型向我公开其所有私有部分时 我总是有一种奇怪的感觉 而且这种感觉并没有被 唤起 假设我有一个类型draw方法 内部调用drawBackground and d
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • Riak 在 MapReduce 查询中失败。使用哪种配置?

    我正在与 riak riak js 结合开发一个 nodejs 应用程序 并遇到以下问题 运行此请求 db mapreduce add logs run 正确返回存储在存储桶日志中的所有 155 000 个项目及其 ID logs 1GXt
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise
  • Jquery 以编程方式更改

    文本

    编辑 解决方案是将其添加到个人资料页面而不是性别页面 profile live pageinit function event p pTest text localStorage getItem gender 我在列表视图中有一个带有一些文

随机推荐

  • Ruby 是否有与未定义实例变量等效的 method_missing ?

    当我调用一个不存在的方法时 method missing会告诉我方法的名称 当我尝试访问尚未设置的变量时 该值只是nil 我试图动态拦截对 nil 实例变量的访问 并根据正在访问的变量的名称返回一个值 最接近的等价物是 PHP 的 get
  • J2ME - 使用 javax.microedition.amms.control.camera.CameraControl;是否可以禁用快门声音?

    在我的黑莓应用程序中 我已经实现了相机 并希望用我自己的声音替换默认的快门声音 我想我可以通过使用方法enableShutterFeedback false 来静音默认相机声音 然后播放我自己的声音 或者在相机激活之前立即播放我的声音来做到
  • Kotlin 中的 crossinline 和 noinline 有什么区别?

    这段代码编译时有警告 性能影响微不足道 inline fun test noinline f gt Unit thread block f 这段代码不编译 非法使用内联参数 inline fun test crossinline f gt
  • 使用 AutoSize=false 防止标签中自动换行

    当标签控件的自动大小设置为 false 时 如何防止设计器模式下 Label 控件中的自动换行 基本上我想在设计器模式下自由移动和调整标签大小 但其文本应始终位于一行 如果需要则剪切 谢谢你的帮助 你想阻止它吗only在设计器模式还是在运行
  • TypeScript 中变量后面的感叹号是什么意思? [复制]

    这个问题在这里已经有答案了 我在一些 React TypeScript 实现中看到过 例如 ref ref gt this container ref 里面的感叹号是什么意思ref 这是 TypeScript 中的特定内容 还是新的标准 J
  • 如何调试 STL/C++ 的 GCC/LD 链接过程

    我正在用 C 开发裸机 cortex M3 以获取乐趣和利润 我使用 STL 库 因为我需要一些容器 我认为通过简单地提供我的分配器 它不会向最终的二进制文件添加太多代码 因为您只得到您使用的内容 实际上我根本没想到与 STL 有任何链接过
  • 如何使用OSRM匹配服务

    如标题中所述 如何使用匹配调用 I tried http router project osrm org match v1 driving 8 610048 46 99917 8 530232 47 051 overview full ra
  • 如何从内联样式中获取百分比高度而不是像素高度?

    所以基本上 我有许多具有内联样式的元素height与百分比 虽然 当我尝试将高度保存为要使用的变量时 它会将其保存为像素 例如 div class wrapper div style height 10 Testing 123 div di
  • 更新到 MacOs Mojave 10.14 后是否有 OpenGL 黑屏和伽玛校正?

    我不小心更新了我的 Mac OpenGL 现在在最新的 MacOS Mojave 中已被弃用 我正在使用 OpenGL GLUT 我知道这很旧 但我只需要一个简单的程序 并在终端上运行 不使用 Xcode 使用在 Sierra 中完美运行的
  • 基于ONVIF wsdl生成Java webservice(自顶向下方法)

    我想为像相机这样的设备生成服务器代码 这些设备有一个标准协议 称为ONVIF https www onvif org它发布了一些流行的 WSDL 文档 所以我必须从 ONFIV 的 WSDL 文档生成一个接口和骨架 当我使用 wsdl2ja
  • Oracle 动态旋转

    我有下表 我需要根据 CCL 列创建列 CCL 列中的值未知 我不知道从哪里开始 任何帮助 将不胜感激 TABLEA ID CCL Flag 1 john x 1 adam x 1 terry 1 rob x 2 john x Query
  • Blackberry Java 中的类之间调用

    当屏幕上 单击 位图时 我试图推送一个新屏幕 为此 我从这篇文章中创建了一个类 黑莓可点击位图字段 https stackoverflow com questions 5722875 blackberry clickable bitmapf
  • 安装 gem 时出错:无法为 cygwin 的堆保留空间,Win32 错误 487

    我正在尝试安装win32 api我的机器上安装了 gem 并且在构建本机扩展时遇到了一些问题 gem install win32 api no ri rdoc Temporarily enhancing PATH to include De
  • 如何为WinForm、C#制作框架?

    我一直在研究改变Windows窗体边框的颜色 发现它是由Windows决定的 好吧 这是有道理的 所以我看到以前问过这个问题的人被告知去这里http customerborderform codeplex com http customer
  • 内存警告后 WKWebView 变为空白

    我正在开发一个 iOS 应用程序 它将在 wkWebView 中显示一些 360 度全景内容 该页面确实会加载 但当它收到内存警告时 它会在 iPad 2 上显示空白视图 相关代码 NSURLRequest req NSURLRequest
  • @selector 和其他类 (Objective-C)

    在对象内部我使用 NSMenu 的addItemWithTitle action keyEquivalent 创建 NSMenuItems 问题是我希望调用另一个对象上的方法作为操作 这action 部分需要一个 selector作为参数
  • pinterest 布局样式的 CSS 代码

    我的挑战是尝试使列表网格视图看起来像 pinterest 类似的布局 我已经用它编写了一些代码 但这还不够 下面的行彼此不匹配 content category grid view li featured position relative
  • Expressjs Passport-Local 无法注销

    我将应用程序 Passport local 复制粘贴到我的应用程序上 有趣的是我可以登录用户 但我不能让他们注销 app get logout function req res req logout res redirect 这并不是什么都
  • SQL Server Express 中的链接服务器

    我正在开发一个应用程序 其中我在 SQL Server Express 中有一个本地数据库 在本地数据库中工作期间 我们需要在另一个 SQL Server 实时服务器上执行查询 并返回一个值 并使用该值在本地服务器中执行查询 对 2 或 3
  • Angular 6:无法绑定到“formGroup”,因为它不是“form”的已知属性?

    我曾在 Angular 2 4 中使用过表单生成器 但现在我在 Angular 6 中使用它 我看到了这个问题 无法绑定到 formGroup 因为它不是 form 的已知属性 https stackoverflow com questio