formGroup 需要一个 FormGroup 实例。请传一份

2024-02-05

情况:

我正在尝试在我的 Ionic 2 应用程序中制作一个非常简单的登录表单。

无论我尝试什么,我都会不断收到此错误:

formGroup expects a FormGroup instance. Please pass one in.

代码:

页面组件:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormGroup, Validators, FormBuilder }  from '@angular/forms';

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})

export class LoginPage {

    loginForm: FormGroup;

    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {}

    ionViewDidLoad() 
    {
        console.log('Login page loaded');

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

    submitLogin() 
    {
        console.log('Doing login..');
    }

}

风景:

<ion-header>
  <ion-navbar>
    <ion-title>LoginPage</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

    <form [formGroup]="loginForm" (ngSubmit)="submitLogin()">

    <ion-item>
        <ion-label>Email</ion-label>
        <ion-input #email type="email" formControlName="email"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Password</ion-label>
        <ion-input #password type="text" formControlName="password"></ion-input>
    </ion-item>

    <button ion-button block type="submit">Submit</button>

    </form>

</ion-content>

问题:

你知道我为什么会收到错误吗?

你知道该代码有什么问题吗?

Thanks!


添加代码在ionViewDidLoad进入构造函数。它可能没有及时分配表单,导致视图使用未定义

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

formGroup 需要一个 FormGroup 实例。请传一份 的相关文章

  • 使用 AngularFire 从 Firestore 过滤数据

    我正在尝试使用 Angularfire 的查询集合从 Firestore 过滤数据 https github com angular angularfire2 blob master docs firestore querying coll
  • mat-table 中每行的 formGroup 数组

    我有一个 formGroup 数组 其中每个元素代表一个表单 接下来我有一个 mat 表 我想要做的是将每个 tr 即每一行 生成为不同的表单 以便表的第 i 行链接到第 i 个 formGroup 因此 在第 i 行内 每个 td 元素都
  • 如何等待,直到我从 Angular 7 中的后端 Spring Boot API 得到响应

    我想使用 http post 方法的结果从一条路线导航到另一条路线 但导航是在没有 http post 响应的情况下发生的 当我调试代码时 响应越来越晚 我怎样才能解决这个问题 有什么办法可以等待执行直到后端返回响应吗 当我单击按钮时 将执
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • 数字和文本列的垫排序问题

    我有角度材料数据源 角度材料版本是 5 0 3 排序正在进行中 但是对于某些列 它的排序不正确 那里有数字和文字 例如 排序结果如 XXX 1 1tesxt 1 OPD OXD 12
  • Angular 5 中使用 rxjs 进行持久订阅

    我对 Angular 5 中的 rxjs 仍然有点陌生 并且很难表达我的问题 我仍然希望得到一些提示 我经常会得到相同的设置 多个组件显示相同的数据 访问数据的单个服务 现在通过 Observables 接收数据时我有 2 个选择 a 订阅
  • 401 Unauthorized("detail":"未提供身份验证凭据。")

    我在后端使用 djoser 的身份验证 当我通过具有内容类型和授权标头的邮递员在 account me 发出获取请求时 我得到了正确的响应 但是当我尝试从我的角度客户端执行相同的请求时 我得到401 Unauthorized detail
  • 发生未处理的异常:工作区中未设置配置“生产”

    您好 在 Angular 8 中创建了一个项目 最初它仅支持一种默认语言 US EN 然后我应用了本地化 在准备生产构建的本地化之前 我曾经给出以下命令 ng build prod base href Windchill com qiwkC
  • 如何禁用 Ionic2 / Angular2 上的“未使用的导入”警告

    我知道有一个选项可以禁用这些 未使用的导入 警告tslint跑步时ionic serve or ionic build 但我不知道该把它放在哪里 有人知道吗 谢谢 1 https palantir github io tslint rule
  • 跨延迟加载路由创建共享模块

    我正在构建一个 Angular 11 应用程序并尝试创建一个SharedModule 我正在使用延迟加载 并希望避免在延迟加载的路由中多次加载公共模块 我创建了一个共享模块并将其导入到我的AppModule 根据我的理解 这个共享模块应该在
  • Angular 9:上传图像时如何将 HEIF 文件格式转换为已知的 Web 格式

    我正在维护一个用 Angular 9 编写的 Web 应用程序 PWA 用户可以在 Cropperjs 中上传图像并裁剪 旋转等 在 iOS 上 新的图像格式 HEIF 正在成为标准 这些用 户抱怨他们无法上传照片 似乎iOS有时会自动转换
  • 在 Angular 中深度复制对象

    AngularJS 有angular copy 深度复制对象和数组 Angular 也有类似的东西吗 您还可以使用 JSON parse JSON stringify Object 如果它在你的范围内 那么它就存在于每个 Angular 组
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • Angular 5 - 在加载数据之前停止未定义对象的错误

    防止控制台中因仍未定义的对象而出现错误的最佳方法是什么 假设我有这个 name string constructor private data DataService this data name subscribe res gt this
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu
  • 类型“boolean”不可分配给类型“Observable

    我有那个代码 method Observable

随机推荐

  • 如何在 Linux 中列出文件的前 10 行或后 10 行而不解压文件 [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我有一个 bz2文件 我想列出前 10 行或后 10 行而不解压缩它 因为它太大了 我尝试过head 10 or tail 10但我看到的是胡言乱语
  • git rebase时进入vim时如何开始打字? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 使用 Powershell 5 时 当我键入git rebase i
  • 在android中集成javascript[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 警报在 Android WebView 中不起作用 https stackoverflow com questions 5271898 javascript alert not
  • HeartBleed python 测试脚本

    我碰到这个Python脚本 https gist github com takeshixx 10107280测试服务器是否存在 HeartBleed 漏洞 有人能够解释 你好 的内容 正在发送的内容以及该内容是如何构造的吗 我并不是想恶意使
  • 无法写入请求:找不到适合请求类型和内容类型的 HttpMessageConverter [application/x-java-serialized-object]

    我正在尝试向第三方服务器发送 xml 请求并期待返回 xml 响应 我在这里附上用于配置 Cnfiguration 网关和通道 自定义 Rest 模板类和要执行的测试客户端的源代码 我们有各种用于 XML Posting 的消息转换器 但尽
  • 如何在 iOS 上获取 Cognito 用户池“sub”属性

    我正在使用 Cognito 用户池授权者 无 AWS IAM 选项 无自定义编码授权者 通过 API 网关调用 Lambda 方法并识别登录 iOS 客户端的用户 在 Lambda 上 我使用从 Cognito 用户池授权者处获得的用户 I
  • 如何在 PL/pgSQL IF 语句中运行 SELECT 查询

    我正在尝试使用以下代码在 PL pgSQL IF 语句中运行 SELECT 查询 DO do DECLARE query type real arr real array 1 BEGIN IF query type 1 THEN RETUR
  • Javascript匿名函数不更新全局变量

    我在一些代码中进行了 getJSON 调用 该调用似乎没有更新全局变量 但我不明白为什么 JSON 数据加载正常 但由于某种原因 全局 EventOptions 数组未在 for 循环中更新 大写的注释指的是变量 有任何想法吗 谢谢 fun
  • 无法在外键上创建表(错误号:150)

    我看到很多同样的问题 但我无法解决我的问题 如果我运行这段代码
  • 如何设置 thymeleaf th:来自其他变量的字段值

    我有一个简单的文本输入字段 我必须在其中设置一个对象的默认值并将其最终值保存在其他对象中 以下代码不起作用 div div
  • 简单的分布式 Erlang

    我有一个简单的模块 module dist compile add 3 add From X Y gt From X Y 我正在启动两个节点 一与 erl sname foo 另一个与 erl sname bar 在我正在做的酒吧节点上 g
  • 速度较慢的 numpy.argmax/argmin 的更快替代方案

    我正在使用很多argmin and argmax在Python中 不幸的是 该功能非常慢 我已经做了一些搜索 我能找到的最好的就在这里 http lemire me blog archives 2008 12 17 fast argmax
  • Firefox 4中的Greasemonkey脚本,想更改网页上的一行代码

    好吧 我会尽量让这件事变得尽可能简单 但不会太含糊 我想更改网页上的一行代码 以防止出现预览窗格 原始代码行 div class previewpane 我想将上面的行替换为 div class previewpane previewpan
  • 文件加密与内容加密不同吗

    加密文件和加密文件内容之间有什么区别吗 如果是这样 两者该如何做 文件加密是从外部加密整个文件 例如通过在 Windows XP 资源管理器中右键单击 内容加密通常被用作文件加密的同义词 但两者是不同的 内容加密是指对文件的内容进行加密 或
  • Pandas 合并错误:MemoryError

    Problem 我正在尝试将两个相对较小的数据集放在一起 但合并会引发MemoryError 我有两个国家贸易数据汇总数据集 我试图将其合并到关键年份和国家 地区 因此需要对数据进行特殊设置 不幸的是 这使得使用concat正如这个问题的答
  • 理解非齐次 numpy 数组

    我最近开始使用 numpy 并注意到一件奇怪的事情 import numpy as np a np array 1 2 3 4 5 9 8 print a shape shape print a 1 0 在这种情况下 形状是2L 但是 如果
  • 从 awk 调用 python 脚本

    大多数解决方案都从 python 调用 awk 但我想反过来做 我有一个从文件中提取信息的 python 脚本 然而 所述文件名在 awk 脚本的列中引用 如何向 python 传递参数 s20s 文件名并从标准输出获取输入 我想将输出添加
  • 填充嵌入的 UITableViewController

    我有一个使用导航控制器的应用程序 在其中一个视图中 我有一个视图容器 其中嵌入了使用静态单元格的 UITableViewController 我需要使用从上一个视图传入的数据来填充此表视图控制器的标签 流程如下 View1 gt segue
  • 用整数哈希替换字符串名称有哪些好方法

    通常 数据驱动设计中的实体和组件或游戏代码的其他部分都会有名称 如果您想准确地找出正在处理的对象 则需要检查这些名称 void Player Interact Entity myEntity if myEntity gt isNearEno
  • formGroup 需要一个 FormGroup 实例。请传一份

    情况 我正在尝试在我的 Ionic 2 应用程序中制作一个非常简单的登录表单 无论我尝试什么 我都会不断收到此错误 formGroup expects a FormGroup instance Please pass one in 代码 页