在 Angular2 的自定义验证器中注入服务

2024-03-19

我尝试使用自定义验证器中的服务来检查用户名是否已存在。

import {Component} from 'angular2/core';
import {
    Control,
    ControlGroup,
    FormBuilder
} from "angular2/common";
import {CharacterService} from "./character-service";

@Component({
    selector: 'register-character-form',
    template: `
        <h2 class="ui header">A new adventurer is coming...</h2>
        <form (ngSubmit)="register()" [ngFormModel]="characterForm" class="ui form">
            <div class="field">
                <label>Nom</label>
                <input ngControl="name">
            </div>
            <button type="submit" class="ui button">Enter in the adventure</button>
        </form>
    `,
    providers: [CharacterService]
})
export class RegisterCharacterFormCmp {
    characterForm: ControlGroup;
    name: Control;

    constructor(private _characterService: CharacterService, fb: FormBuilder) {
        this.name = fb.control('', this.characterNameValidator);

        this.characterForm = fb.group({
            name: this.name
        });
    }

    register(): void {
        //TODO: To implement
    }

    // Not works, this binds the control
    characterNameValidator(control: Control) {
        return this._characterService.isCharacterNameAlreadyExists(control.value) ? {nameCharacterAlreadyExistsError: true} : null;
    }
}

这不起作用。在characterNameValidator中,“this”引用的是控件而不是我的类。该服务未定义。如何在验证器中使用我的服务?

在全球范围内,如何在自定义验证器中传递参数?


你需要控制什么this意味着你的验证。你可以这样做bind https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

this.name = fb.control('', this.characterNameValidator.bind(this));

那么其他一切都应该按预期工作。

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

在 Angular2 的自定义验证器中注入服务 的相关文章

  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • 如何通过自定义指令动态添加组件

    我想编写一个自定义指令 它将根据 div 内的某些逻辑动态添加组件 我在其中使用了自定义指令 我尝试使用 componentFactoryResolver 和 viewContainerRef createComponent 动态添加组件
  • Rxjs、fromEvent处理多个事件

    在 rxjs 5 1 中处理同一 DOM 节点上的多个事件的最佳方法是什么 fromEvent element event name 但我一次只能指定一个事件 我要手柄scroll wheel touchmove touchend even
  • 警告:找不到父级 tsconfig.json

    我想修复警告 警告 找不到父级 tsconfig json 在打字稿中Errors tab in IntelliJ IDEA 2016 3 我的 TypeScript 代码位于src目录和我的 TypeScript 输出将是lib正如预期的
  • aspnetcore 出现角度错误 NodeInitationException:节点调用在 60000 毫秒后超时

    我在用着yo generator aspnetcore spa一旦我运行应用程序 我就遇到了问题 处理请求时发生未处理的异常 NodeIncationException 节点调用在 60000 毫秒后超时 您可以通过设置更改超时持续时间 N
  • Angular4 屏蔽输入中的字符而不更改其值

    如何屏蔽输入中除 Angular 4 中最后四个字符之外的所有字符 即显示 而不更改实际值 例如 输入文本框中的数字应类似于 1234 且值应为 7671234 使用指令 Directive selector stringHide expo
  • 回形针不支持 .doc 文件

    在 Rails 4 0 2 中 我使用回形针 gem 上传文件 但它不支持 doc 文件 在文件上传字段下方 显示一条错误消息 扩展名与其内容不匹配 在模型中 检查内容类型的验证如下 validates attachment content
  • 很好地处理数据库约束错误

    再一次 它应该很简单 我的任务是在我们的应用程序的域对象中放置一个具有唯一约束的特定字段 这本身并不是一个很大的挑战 我刚刚做了以下事情 public class Location more fields Column unique tru
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 在 Typescript 中隐式创建一个元组

    有没有一种方法无需类型提示即可在 Typescript 中创建元组 如果我只是这样做 const tuple 1 2 元组的类型number 我能得到的最接近的单线是 const tuple number number 1 2 我错过了什么
  • 如何为名称为数组的 jquery 表单验证插件创建规则?

    有谁知道当您有一个数组的名称属性时如何为 jquery 表单验证插件创建规则 eg
  • 只能通过bootstrap将服务注入到服务中吗?

    我正在尝试连接一个使用 Http 服务的基本 Angular2 应用程序 我见过的大多数教程都是通过Component消耗Http服务 这似乎是错误的 除非瘦控制器的基本理念已经改变 但这是一个不同的问题 我想创建一个使用 Angular
  • 带纱线的 Angular CLI

    如何将 Angular Cli v6 0 3 的包管理器更改为yarn 我试过 ng set global packageManager yarn 但 Angular 说 get set 已被弃用 取而代之的是 config 命令 ng c
  • yup.js 验证数字字段大于同级字段,或者可以为空

    我正在使用 Yup js 来验证一些表单字段 我有两个整数字段 Year Built Year Renovated Year Built是必填字段 Year Renovated is not 不过 装修年份可以留空如果有一个值它应该大于建造
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • Angular - 在一个组件中定义的函数,它生成动态子组件,不能在单独的非相关组件中调用

    更新到此这个新问题 https stackoverflow com questions 73987046 angular dynamically adding removing multiple instances of a single
  • CSF3 中的 Typescript 支持

    我正在使用 CSF3 编写故事 并且我想正确注释我的故事 我用谷歌搜索过 基本上找不到答案 我尝试过一些技巧here https github com storybookjs storybook issues 7677但没有任何效果 我发现
  • 用于验证目的的动态查找方法

    我正在使用 Ruby on Rails 3 0 7 我想在运行时查找一些记录以进行验证 但为该查找方法传递 设置一个值 也就是说 在我的班级中 我有以下内容 class Group lt lt ActiveRecord Base valid

随机推荐

  • 带或不带 MSYS 的 MinGW makefile(del 与 rm)

    我正在使用 MinGW 在 Windows 上编译一些东西 我打电话mingw32 make直接来自cmd exe一切 我需要的 都工作正常 但是我发现我需要能够从 MSYS 环境进行编译 并且我遇到了问题copy and del命令不被识
  • 触摸事件不适用于 Cordova 应用程序的 ios 版本

    我有一个非常简单的科尔多瓦应用程序 它是默认科尔多瓦 设备就绪 模板的扩展 它有一个按钮 附加了一个简单的单击事件 可以看到这里在 iOS 模拟器上运行 以下是我的项目的代码 索引 html
  • 使用记录编辑器/Jrecord 解压 COMP-3 数字

    我根据 cobol copybook 创建了布局 布局快照 我尝试加载数据并选择相同的布局 它给我的某些列提供了错误的结果 我尝试使用所有二进制数字类型 类阶边缘 DIV 无 EDG 办公室 无 EDG 注册区域无 EDG 城市 无 EDG
  • 使用“lapply”对数据框 (R) 中的所有列进行缩排序

    我正在尝试应用Winsorize 函数使用lapply来自library DescTools 包裹 我目前拥有的是 data col1 lt Winsorize data col1 这本质上用基于分位数的值替换了极值 替换了以下数据 gt
  • 在Python中解析日期字符串

    我如何重写以下子句 if u in date category title month 1 elif u in date category title month 2 elif u in date category title month
  • Firefox 和 Chrome 填充之间的区别

    Firefox 和 chrome 在 css 中渲染填充的方式有所不同 在 Chrome 中显示正确的内容在 Firefox 中进行了额外填充 有办法解决吗 button font family helvetica arial font s
  • ({"key": "value"} = {}) 语法在 JavaScript 函数中的含义是什么

    我正在学习 JavaScript 课程 特别是 MongoDB 大学 M220JS 课程 在其中一个任务中 我遇到了类内函数声明的语法 static async getMovies filters null page 0 moviesPer
  • Azure Functions 绑定重定向

    是否可以在 azure 函数文件夹结构中包含 web config 或 app config 文件以允许程序集绑定重定向 假设您正在使用最新的 2017 年 6 月 Visual Studio 2017 函数工具 我根据以下发布的代码片段得
  • 如何将整个表格视图捕获为图像,从中创建 .pdf 并通过电子邮件发送

    这是我第一次尝试在 iOS 中创建 pdf 文件 我有一个表格视图 它生成我想要在 pdf 文件中呈现的所有数据 这是我的代码 用于将整个表格捕获为图像 从图像生成 pdf 并通过电子邮件发送 IBAction save id sender
  • PRG 模式是否有一个在验证失败时不会重定向的名称?

    我的网站遵循重定向后获取模式 似乎有两种方法可以处理失败的验证 任何一个 使用验证消息渲染页面 临时存储验证消息 并重定向到显示消息的 GET 这两种实现都遵循 PRG 模式吗 是否有更具体的方法来描述这两种模式 我问这个问题主要是为了教育
  • 文件 ld-linux-x86-64.so.2 中未定义版本 GLIBC_PRIVATE

    如果有人可以给初学者一些有关 gcc 版本问题的帮助吗 我遇到了这个问题 version GLIBCXX 3 4 20 not found 我点击链接后 如何在 CentOS 7 2 上使用 yum 安装 gcc 5 3 https sta
  • 静态变量顺序[重复]

    这个问题在这里已经有答案了 我对 C 中静态变量声明的顺序有疑问 当我运行这段代码时 static class Program private static int v1 15 private static int v2 v1 static
  • 具有虚函数的类的大小

    我正在修改 C 概念 但我坚持使用非常简单的代码 include
  • Dart 产生来自另一个流监听器的流事件

    我有一个函数可以生成stream的具体事件 现在我有一个来自存储服务的流 它有自己的事件 寻找一种方法在发生变化时产生我的事件storage stream 这段代码片段并不能解决问题 Stream
  • 输入空值时停止提交

    我正在寻找一个简单的解决方案来阻止登录表单提交空输入字段 表格的代码如下 如果可能的话 我想使用一个简单的 Javascript 解决方案
  • 如果模式匹配,则打印 lua 表中的值

    好吧 我最近刚接触 lua 发现自己陷入了以下困境 我有函数peripheral getNames 这是一个自定义函数 它将返回一个具有结构 key value 的表 而 key 始终是一个数字 从 1 开始 value 将是该函数找到的内
  • 在区域注册中注册路线

    我所在区域有两条路线 一条是自定义路线 一条是默认后备路线 请参见下文 var dashboardRoute new DashboardRoute ObjectFactory GetInstance
  • 为什么intellij IDEA高亮显示build.sbt?

    我最近在 IDEA 中使用 sbt 创建了一个新项目并得到了这个 它出什么问题了 我安装并启用了 scala 插件 IDEA 版本是 14 好的 我找到了解决这个问题的方法 链接在这里 https stackoverflow com a 2
  • DataSource 和 ConnectionPoolDataSource 之间的区别

    有什么区别javax sql DataSource http docs oracle com javase 6 docs api javax sql DataSource html and javax sql ConnectionPoolD
  • 在 Angular2 的自定义验证器中注入服务

    我尝试使用自定义验证器中的服务来检查用户名是否已存在 import Component from angular2 core import Control ControlGroup FormBuilder from angular2 com