为什么Angular 4 FormGroup自定义验证器不能工作？
Angular 4中的FormGroup自定义验证器无法工作可能有以下几个原因：
- 验证器函数没有正确绑定到FormGroup：在Angular中，自定义验证器函数需要正确绑定到FormGroup。确保在FormGroup中使用的验证器函数前面添加
this关键字，以确保它们正确绑定。 - 验证器函数没有正确返回验证结果：自定义验证器函数应该返回一个对象，其中包含验证失败的信息。如果验证通过，应该返回
null。确保验证器函数正确返回这些值。 - 验证器函数没有正确添加到FormGroup：在创建FormGroup时，需要将自定义验证器函数作为第二个参数传递给FormGroup构造函数。确保将验证器函数正确添加到FormGroup中。
- 表单控件没有正确绑定到FormGroup：确保表单控件正确绑定到FormGroup中。可以通过在表单控件的HTML标记中使用
formControlName指令来实现。 - 表单控件的值没有正确更新：如果表单控件的值在验证器函数执行之前没有正确更新，验证器函数可能无法正确工作。确保在调用验证器函数之前，表单控件的值已经更新。
如果以上解决方法都无效，可能需要进一步检查代码逻辑、验证器函数的实现以及表单控件的绑定情况。如果问题仍然存在，可以提供更多的代码和错误信息，以便更好地帮助解决问题。
关于Angular 4的FormGroup自定义验证器的更多信息和示例，可以参考腾讯云的Angular文档：Angular - FormGroup自定义验证器
相关·内容
2回答
角形群重新初始化
angular、angular-forms、angular2-formbuilder
在角8中，我有一个表单组，其中我想用新的值重新初始化表单。但是，当我第二次执行fb.build时，没有正确地显示这些值。
即使应该选中复选框并在输入字段中显示[object Object]，该复选框仍未选中。
<form [formGroup]="myform" novalidate autocomplete="off">
<mat-checkbox
formControlName="dndcheckbox"
[(ngModel)]="userdetails.DoNotDisturb
浏览 6提问于2020-03-04得票数 2
回答已采纳
4回答
Angular 2 reactive forms -通过管道从formControlName传送值
angular、angular2-forms
使用Angular 2，我有一个名为"example“的参数，它是一个Date对象。在模板中，我想用日期管道格式化"example“。如下所示：
<input type="text" [value]="example | date:'shortTime'">
// 9:00 AM
但是，我需要使用Angular的反应形式。FormControls优先，所以formControlName将覆盖value指令中的任何内容。
<input type="text" formControlName=
浏览 2提问于2017-03-09得票数 6
1回答
Angular2 FormGroup验证-标记特定控件无效
angular、angular2-forms、angular-reactive-forms
我有一个使用FormGroup的Angular 2 Reactive form。我需要比较两个字段的值，因此我在创建时将一个验证器传递给FormGroup。验证效果很好：
this.form = this.formBuilder.group({
add: this.formBuilder.group({
mobile: ['', [
Validators.required,
this.duplicate
]],
voice: [false]
}),
existing: this.formBuilder.array([]
浏览 2提问于2017-05-10得票数 0
2回答
角日期-在提交表单时，无效输入未被标记为无效。
html、angular、forms、html-input
我有一个简单的表单，其中只有一个日期控制。当我键入无效日期(如30-Feb-2018 )时，该控件处于无效状态，我的CSS样式在其中启动，控件显示为红色边框。
我的问题是，当用户单击“保存”时，this.appFormGroup.invalid返回false并执行保存操作。如何停止保存操作(要通知用户日期无效？)
下面的代码演示了我面临的问题：
app.component.ts文件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@ang
浏览 0提问于2018-06-05得票数 4
2回答
Angular 4模板驱动形式错误--从“从理论到实践电子书”的练习
angular、angular-forms
我正在遵循阿西姆·侯赛因先生的书中的说明，并遇到了一个控制台错误。作为对我自己的一个挑战，我没有像作者在他的例子中使用的那样使用plunker，我使用angular cli来模拟更真实的开发场景，但我遇到了以下错误：
ModelFormComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
Example:
<div [formGroup]="myGroup">
<input formControlName="fi
浏览 7提问于2017-07-03得票数 0
回答已采纳
3回答
无法重置包含select的反应窗体
angular、forms、angular6、angular-reactive-forms
我使用的是angular 6
我的html是
<form [formGroup]="myForm" >
<label>
<input type="text" formControlName="name" placeholder="name" required autofocus >
</label>
<label>
<select name="drop" formControlName="drop">
浏览 2提问于2018-07-26得票数 6
回答已采纳
1回答
如何在可重用的反应式表单中添加验证
angular、validation、angular-reactive-forms
这是可重用的反应式。如何在app-child中为street formControlName添加required验证和错误消息
这是
app.html
<form [formGroup]="myForm">
<label>Name: </label>
<input formControlName="name" />
<app-child [address]="myForm"></app-child>
</form>
app.ts
expor
浏览 8提问于2021-02-19得票数 0
3回答
在Angular中显示formControlName的验证消息
angular、angular6、angular7
我有以下的Angular SignUp表单： <form [formGroup]="signUp" (ngSubmit)="onSubmit()">
<input id="email" type="text" formControlName="email" placeholder="Email">
<input id="email" type="password" formControlName="password
浏览 7提问于2019-02-22得票数 3
回答已采纳
2回答
离子2/3:同时将数据绑定到提供程序，并使用表单验证
angular、ionic2
我的应用程序中有一些数据绑定，它们绑定到提供者，但现在我想添加一些表单验证。问题是，当我开始尝试在表单验证中使用[(ngModel)]时，会出现一个错误。
我得到的错误消息表明：
ngModel不能用于使用父formGroup指令注册窗体控件。尝试使用formGroup的合作伙伴指令\"formControlName\“代替。示例： <div [formGroup]=\"myGroup\"> <input formControlName=\"firstName\"> </div> In
浏览 5提问于2017-04-13得票数 1
回答已采纳
2回答
如何将两种形式转换为组件，并在角5中添加要查看的组件
angular、typescript、angular-components、angular-reactive-forms
我有两种窗体，目前在同一组件上运行良好。如在InfoAndQualificationComponent.ts中所示
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: 'app-info-and-qualification',
template: `<form class="form-horizontal" [
浏览 0提问于2018-08-10得票数 0
回答已采纳
1回答
角11自定义验证
angular
我一直在寻找所有的努力使自定义验证工作在角11。到目前为止，我一直无法使它按照预期的工作。
如果我使用来自Angular.io的直接方法(下面)，那么param (称为“control”)是未定义的。
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const forbidden = nameRe.test(control.value);
r
浏览 3提问于2021-05-11得票数 1
回答已采纳
2回答
Angular Reactive窗体自定义验证未在触摸屏上触发
javascript、angular、angular-validation
我有一个带有默认Validation.required和CustomValidation的angular reactive表单。在CustomValidation中，我打算检查控件是否被触摸，但不知何故这不起作用。
import {
CustomValidation
} from './CustomValidator';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.
浏览 8提问于2021-09-30得票数 0
2回答
角2(反应性表单)列出表单控件中的所有验证规则(如模式、最小长度、最大长度)，无论是否在错误对象中。
angular、angular-reactive-forms
我正在创建一个组件，在其中我需要列出输入的所有验证规则。
home.component.html
<input-validation>
<input type="text" class="form-control" formControlName="name">
</input-validation>
home.component.ts
export class HomeComponent implements OnInit {
public myForm: FormGroup;
con
浏览 5提问于2017-08-14得票数 2
回答已采纳
2回答
hasValidator函数在角度上不与Validators.compose一起工作
angular、angular-reactive-forms
在与hasValidator一起使用时，Validators.compose函数不起作用。
如果需要表单控制器，我想显示"*“
import { Component, VERSION } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [&
浏览 10提问于2022-10-27得票数 0
回答已采纳
7回答
角反应形式自定义控件异步验证
angular、typescript、validation、angular-reactive-forms、controlvalueaccessor
更新:异步验证成功地解决了问题。但是，初始验证状态还有另一个问题。见最新答案。
这里的诀窍是：
将具有已实现的ControlValueAccessor接口的组件用作自定义控件。
这个组件在某些反应形式中用作FormControl。
此自定义控件具有异步验证器。
问题：
方法从ControlValueAccessor接口调用的方法value ()在值更改后立即调用，不要等待异步验证器。当然，控件是无效的和挂起的(因为正在进行验证)和主窗体也会变得无效和挂起。一切都很好。
但。当异步验证器完成验证并返回null (意味值为有效)时，自定义控件将是有效的，状态也将更改为有效，但是
浏览 13提问于2019-12-12得票数 7
3回答
角度反应式表单错误:必须为表单控件提供名称为的值：
angular、forms、typescript
我假设我是angular的新手。我正在尝试实现一个角度反应式表单，但我遇到了这个错误：“必须为表单控件提供一个值，名称为:目标。
这是我的组件和html的相关部分：
import { Component, Inject } from '@angular/core';
import { Http } from "@angular/http";
import { FormGroup, FormControl, FormBuilder, Validators } from "@angular/forms";
@Component({
sele
浏览 0提问于2018-06-27得票数 47
2回答
输入类型编号步骤验证-自定义表单验证
angular、validation、input、angular-reactive-forms
我有一个角度应用程序，它使用反应形式。我的一个输入字段类型为number，我使用step指令来确定有效值，如下所示：
steps = 0.25
myForm: FormGroup
constructor(private fb: FormBuilder) {
myForm = this.fb.group({
numberControl: new FormControl(null)
});
<input type="number" step="{{steps}}" formControlName="numberControl&#
浏览 3提问于2020-03-02得票数 1
回答已采纳
1回答
角- FormBuilder.group不接受验证器数组
angular、angular-reactive-forms、angular-formbuilder
我试图使用角FormBuilder提供的额外参数映射
group(controlsConfig: {
[key: string]: any;
}, extra: {
[key: string]: any;
} | null = null): FormGroup
博士：
但面对
this.validator不是一个函数
如果我通过一个验证器而不是一个数组，那么上面的错误就会消失，但是验证不会发生吗？
有人能帮我这个或提供正确的方式使用额外的地图参数吗？
我的组件及其相应的模板如下：
app.component.ts
import { Component } from &#
浏览 0提问于2018-03-18得票数 4
回答已采纳
2回答
角反应嵌套形式
javascript、angular、typescript、angular-reactive-forms、angular-forms
我试图在我的角度项目中嵌套多个反应形式，并且有不同的组成部分。
例如，我有一个包含两个输入的表单，一个输入为名称，一个输入用于描述和一个提交按钮。我称这个组件为NameDescComponent
我计划在多个页面和表单中使用这个组件。以下是该组件的html。
<form [formGroup]="nameDescForm" (ngSubmit)="customEmit()">
<div fxLayout="row" fxLayoutGap="10px" fxFlex>
<mat-f
浏览 0提问于2019-01-09得票数 3
回答已采纳
1回答
基于formGroup和ngModel的离子2表单验证问题
angularjs、angular、ionic-framework、ionic2
我试图在我的离子型2项目上按照实现一个看似简单的表单验证例程。
在控制器的构造函数中，我像这样使用FormBuilder来生成一个formGroup：
this.form = formBuilder.group({
date: ['', Validators.required],
client: ['', Validators.required]
});
然后在模板中，我向相关元素添加了formControllerName属性，如下所示：
<ion-select formControlName="client" [(ngModel)
浏览 1提问于2017-03-08得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
