FormControl验证器始终无效
FormControl验证器是Angular框架中用于验证表单控件的一种机制。它可以用于验证用户输入的数据是否符合预期的格式、范围或其他条件。当FormControl验证器无效时，意味着表单控件的值不符合验证规则，即用户输入的数据不满足预期要求。
FormControl验证器可以分为内置验证器和自定义验证器两种类型。内置验证器是Angular框架提供的一些常用验证规则，例如必填字段、最小长度、最大长度、正则表达式等。自定义验证器则是根据具体业务需求自行定义的验证规则。
应用场景：
- 表单验证：可以用于验证用户注册、登录、数据提交等表单中的各个字段，确保输入的数据的合法性。
- 数据校验：可以用于验证从后端获取的数据是否符合预期，例如校验接口返回的数据格式、数据完整性等。
推荐的腾讯云相关产品：
- 腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器实例，用于部署和运行应用程序。
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高可用、可扩展的关系型数据库服务，用于存储和管理数据。
- 腾讯云云函数（SCF）：无服务器计算服务，用于按需运行代码，可用于处理表单数据的验证逻辑。
- 腾讯云CDN加速（CDN）：提供全球分布式的内容分发网络，加速静态资源的传输，提升用户访问体验。
更多关于腾讯云产品的介绍和详细信息，可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我想验证组件是否有效。有效组件的定义是组件的品牌、名称、类型、引用、supplierId和familyId是唯一的。当de品牌、名称、类型、引用、supplierId和familyId不是唯一的问题时，我正在编辑字段类型(例如，但不是更改组件中其他内容的引用)，这些问题在更改字段引用之前仍然是无效的。我怎样才能解决这个问题?谢谢你的帮助。
这是我的表格
this.componentDetailForm = new FormGroup({
familyId: new FormControl(0, {
validators: [Validators.required, Va
浏览 2提问于2022-04-20得票数 -2
我发现这个可以执行异步验证。这不再适用于RC3 (Reactive )了。
如何在这里进行异步验证？
this.username = new FormControl( '', [ <any>Validators.required, <any>ProfileValidator.usernameTaken ]);
...
class ProfileValidator {
static usernameTaken(control: FormControl): Promise<{[key:string]:boolean}> {
let
浏览 2提问于2016-09-09得票数 2
2回答
因为这个bug浪费了太多的时间。我编写了一个自定义验证，以确保“货币名称”不会重复，名为"validateNameUniqness“的自定义验证函数从laravel api调用http服务。
laravel必须确定名称是否重复:如果名称不重复，则laravel将返回true，否则将返回一条错误消息。在这两种情况下，laravel都会标记状态为"200“的响应。
laravel代码：
public function validateCurrencyNameUniqness($name){
$request = new Request();
$request-&g
浏览 0提问于2018-03-20得票数 0
2回答
我试图向表单控件添加一个错误(没有任何验证器)，并期望呈现时控件的状态无效。但是它被呈现为有效的。我到底搞错了什么？ 完整示例：https://embed.plnkr.co/aYayRFpBBTEzggL0vkXi/ const name = new FormControl('A Name');
name.setErrors({ 'something': true });
name.markAsTouched();
const street = new FormControl('A Street');
this.formData = new
浏览 23提问于2019-04-24得票数 1
使用反应式表单时，包含无效(无效表单)的FormControls的formGroup显示为无效，这是正常的，但它不包含任何错误。 我应该能够从formGroup.errors中的表单中获取所有错误，但它为空 但是，表单状态是无效的，并且在每个无效的formControl下，它都会给我一个验证错误:我错过了什么？ 检查错误： import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
浏览 23提问于2019-12-15得票数 12
我是新的角和使用角FormControl，并面临一些问题如下。
我只有一个输入文本与所需的验证器。根据用户输入的内容，如果文本有效，我希望启用一个按钮。如果输入文本无效，我想禁用按钮。
运行此操作时，禁用按钮永远不会启用。请查收，让我知道一些建议。
这是我的密码。我用的是角反应形式。
sample.html：
<label for="name">Name: </label>
<input type="text" [formControl]="userName" required>
<p>Value:
浏览 11提问于2022-10-21得票数 0
回答已采纳
我有一个像这样分配的FormGroup：
this.homeForm = new FormGroup({
bicos: new FormArray([],HomeInputValidator.isValid)
});
所有的FormControl都添加到FormArray中，如下所示：
addForm(){
(<FormArray>this.homeForm.controls['bicos'])
.push(new FormControl(null));
}
据我所知，验证器负责整个FormArray，即当一个FormControl无效时，它会触发所有其他FormC
浏览 0提问于2018-02-21得票数 0
回答已采纳
我一直在开发一个条件验证器，它本质上需要验证3个不同字段上的值。 如果所有字段都没有值，则表单无效。 如果其中一个字段有值，则表单有效。 每个字段也有一个正则表达式模式，只要输入一个值，就不需要验证它。 我试过使用条件验证器... conditionalValidator(predicate: () => boolean, validator: ValidatorFn): ValidatorFn {
return ((formControl: AbstractControl) => {
if (!formControl.parent) {
r
浏览 55提问于2021-08-17得票数 0
3回答
我有一个表单组，需要用ngIf显示所需的输入之一。但是，即使不存在此输入，窗体控件也会检查它，返回表单也无效。我的代码就像这个html
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label>mobile</label>
<input type="text" formControlName="mobile" />
<div *ngIf="!hasInfo">
<lab
浏览 6提问于2020-08-15得票数 0
我正在用角(4.0)创建一个应用程序，其中包含一个表单(FormGroup)。在这种形式下，我有一个电子邮件输入(与FormControl)，我使用Validators.email进行验证。
import { Validators } from '@angular/forms';
// ...
let validators = [];
if ([condition]) {
validators.push(Validators.email);
}
let fc = new FormControl([value] || '', validators);
/
浏览 7提问于2017-05-11得票数 16
回答已采纳
1回答
我有password和confirm_password字段的登记表。我有一个自定义验证来检查这些密码是否相同。问题是:当我在password字段中键入‘password’，在password_confirm字段中键入qwerty123时，一切都很好。但是，如果然后添加一些char，例如，在4字段中添加confirm_password字段，然后将相同的char 4添加到password字段--我的表单将无效(property valid是false)，并且我不能对它做任何事情。
我在这里看过类似的解决方案，但是那些有用的东西对我没有帮助。
我的组成部分：
public userNameInp
浏览 1提问于2017-07-31得票数 0
回答已采纳
在我的应用程序中，我有一个不需要提交表单的FormGroup，但是，如果用户试图填写该组的任何部分，需要在其中显示特定的字段，或者该组应该被视为无效。
是否有一种方法可以为非必需的FormGroup定义所需的字段，以便我能够保证数据的完整性？
这是我的小组
FormGroup({
officeId: new FormControl("", [Validators.required]),
fileOwner: fileOwner,
secondaryOwner: secondaryOwner,
managedByPrimary: new FormC
浏览 0提问于2018-09-25得票数 1
回答已采纳
ts：
budget = new FormControl(null, [Validators.required]);
html：
<input
id="budget"
currencyMask
placeholder="Dollar"
[ngModel]="modelService.budget"
[formControl]="budget"
value="{{ modelService.budget}}"
[min]="1.0"
浏览 17提问于2022-10-17得票数 0
回答已采纳
我有一个反应性表单，其中包含一个复选框列表，如果选中其中一个复选框，将显示一个输入表单。如何添加验证器以确保至少选中一个复选框。
这是我的component.ts：
coveragestypes : Array<ItemPolicyModel>=
[{id:'1', name :'type 1'},
{id : '2',name :'type 2'},
{id : '3',name :'type 3'},
{id:'4',name:'type 4'}]
浏览 3提问于2021-02-02得票数 0
回答已采纳
我试图使用自定义验证器将整个fromGroup设置为无效，这似乎不起作用.
下面代码的目标是比较fromGroup的两个实例。
如果它们匹配，就意味着没有进行任何更改，因此它必须无效。
否则，它不匹配，这意味着已经进行了更改，因此它必须是有效的。
我的变量isValid在我记录它时正确工作。取决于变化，它会变成真或假。
但是，我无法设法使其无效，我尝试了许多形式文章和堆栈溢出的方法，其中有一个，似乎两者都不起作用。
就像来自的
我看到过许多类似的文章都有，它们使用控件，而这里的情况并非如此。
public updateCyclistForm: FormGroup
public
浏览 0提问于2021-05-25得票数 1
我尝试在自定义异步验证器中传递一个类属性，但是当我从这个验证器中记录它时，它的值仍然是undefined .
来自CustomValidators.js：
static isValidPlace(place: Place, controlName: string): AsyncValidatorFn {
return (control: FormControl): Observable<{ [key: string]: boolean }> => {
console.log('control', control.value);
浏览 1提问于2018-03-22得票数 0
回答已采纳
角响应形式setValue将字符串设置为数字输入类型，输入框为空但在控件中分配字符串值，所需验证无效。
我是表单控制器
ngOnInit() {
this.profileForm = new FormGroup({
name: new FormControl("", Validators.required),
age: new FormControl("", Validators.required),
}
}
patchAge(){
this.profileFo
浏览 9提问于2022-04-21得票数 0
2回答
我想限制输入名称为45，并显示消息的限制超过。下面我是附加我的html文件和ts文件。我用角10。还有其他方法可以限制输入和显示警告消息。谢谢
newUserRegForm = new FormGroup({
'username': new FormControl('', Validators.required , Validators.maxLength(45)),
'password': new FormControl('', Validators.required),
'cpassword':
浏览 14提问于2022-11-21得票数 1
我制作了一个非常简单的电子邮件验证器，如下所示：
function validateEmail(formControl: FormControl): {[key: string]: any} {
const regExp = new RegExp(`^[\\w.%+\-]+@[\\w.\-]+\.[a-zA-Z]{2,16}$`);
return regExp.test(formControl.value) ? null : { email: true };
}
当我将它添加到反应性表单方法中的验证器列表中时，这是可行的。
但当我将上述函数更改为：
function valid
浏览 1提问于2017-02-14得票数 0
回答已采纳
如何在一个FormGroup中验证每个FormArray？这里我有一个定制的验证器：
export class GridProcessorValidator {
static validateGroupItem(definition: ObjectDefinition) {
return function(control: AbstractControl): ValidatorFn {
return null;
};
}
}
以下是表格：
this.gridProcessorForm = this.fb.group({
prope
浏览 13提问于2019-11-26得票数 0
1回答
垫子错误不会出现在错误上
、、、、
我创建了一个自定义Validator方法，它检查在mat中键入的值是否存在于Array中。
此方法返回{ isExchange: true }。我在返回错误消息的另一个方法中使用this.tradeForm.get( 'exchange‘).hasError( 'isExchange’)。一切都很好。
作为mat自动完成的一部分，在mat表单字段标记中，我添加了以下代码：
<mat-error *ngIf="tradeForm.get( 'exchange' ).invalid">{{getFormErrorMessage( '
浏览 1提问于2018-02-19得票数 0
回答已采纳
我试图以angular6反应形式添加多个regex模式。从一个答案我得到了这个
ceInterfacename: new FormControl('', [
Validators.required,
this.regexValidator(new RegExp('^[0-9]+$'), {'number': ''})
]),
在HTML中
<mat-form-field>
<input matInput id='ceInterfacename' placeholder=
浏览 1提问于2019-06-13得票数 1
对不起我的英语不好。
我试图在我的角度应用程序中使用自定义异步验证，如下所示
asyncValidator(control:FormControl):Promise<any>{
const promise = new Promise<any>(
(resolve, reject) =>{
setTimeout(() => {
console.log("it works");
resolve(null);
},5000);
}
);
浏览 2提问于2017-11-04得票数 2
回答已采纳
我有一个父组件，它包含多个嵌套子组件。可以有条件地显示或隐藏子组件，因此我需要能够启用和禁用这些子组件中的验证器，以便当一个子组件被隐藏时，它的验证器不会使表单无效。
我尝试在子组件上添加公共方法，如下所示：
clearValidators() {
this.formControl.clearValidators();
}
resetValidators() {
this.formControl.setValidators(Validators.compose([
Validators.required,
CustomValidators.existsIn(this.
浏览 0提问于2018-09-04得票数 1
回答已采纳
子ControlValueAccessor组件中的ControlValueAccessor不受父formControl验证的影响。
<!-- Parent component template -->
<app-unique-name-text-box [formControl]="categoryName"></app-unique-name-text-box>
// Parent Component ts
this.addCategoryForm = fb.group({
'categoryName': [&#
浏览 1提问于2020-01-11得票数 3
回答已采纳
2回答
如何验证包含对象的输入字段
、、、、
如何检查必填输入字段不为空，formControl无法读取对象...
public discountParamsForm = new FormGroup({
name: new FormControl('', Validators.required),
type: new FormControl('', Validators.required),
status: new FormControl('', Validators.required),
value: new FormControl('
浏览 3提问于2021-10-28得票数 0
1回答
我试图使用来自角材料的指令显示一个自定义错误消息，因此我在下面编写了该方法：
类型记录文件
import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'input-errors-example',
templateUrl: 'input-errors-example.html',
styleUrls: ['input-errors
浏览 1提问于2017-09-26得票数 0
回答已采纳
1回答
我正在使用set验证器的once条件是有效的，满足它的not形式无效。 public phoneNumberTypes: any[] = [
{ number: 'Mobile' },
{ number: 'Home' },
{ number: 'Work' }
]; 基于选择下拉更改，我以反应式形式应用设置验证器。 pDetailsForm = this.formBuilder.group({
firstName: new FormControl(&
浏览 24提问于2020-04-25得票数 0
3回答
有一个名为"checkPwd“的变量，它有3个可选值。“更正”、“空”和“无效”返回方法应该基于这个变量返回各种HTML元素。就像这样。
<FormControl>
<Stack style={styles.stack}>
<Input
type="password"
placeholder="Confirm Password"
isInvalid={checkPwd == "correct" ? false : true}
浏览 6提问于2021-08-27得票数 1
回答已采纳
我有一个自定义验证器来计算2个控制器值；totalDisch应该比damaNumb更多
组件文件：
form = new FormGroup({
hospital: new FormControl({ value: '', disabled: true }, Validators.required),
department: new FormControl('', Validators.required),
damaDt: new FormControl('', Validators.required),
d
浏览 4提问于2017-11-25得票数 0
在customerNameValidator中必须返回什么，如果
异步验证失败/成功表明我的'customerName‘FormControl无效？
this.customerForm = this.formBuilder.group({
customerName:
[this.newCustomerName, [Validators.minLength(2), Validators.required],[this.customerNameValidator.bind(this)]]
});
customerNameValidator(c: AbstractControl)
{
浏览 14提问于2017-02-22得票数 6
回答已采纳
我正在尝试为我的FormControl mealType定制一个验证器
如果我的FormControl category有一个值，而mealType没有，那么mealType应该是无效的。
如果category没有值，mealType应该是有效的。
我收到一个控制台错误：
TypeError:无法读取未定义的属性“get”
代码：
ngOnInit() {
this.findForm = this.formBuilder.group({
categories: [null, Validators.required],
mealTypes: [nu
浏览 0提问于2016-11-12得票数 24
回答已采纳
角度反应形式，“标题”必须有至少4个字符，没有前导和尾随空格。在blur上增加了验证器和自动剪裁引导和尾随空格，但是验证器不接受经过修剪的字符串。例如，12345变成12345仍然无效。注意，vcontrol.value是只读的，不能将trim和赋值组合成自定义函数.
<form [formGroup]="myForm">
<input type="text" formControlName="title" (blur)="leaving($event)" placeholder="Input title
浏览 1提问于2021-08-25得票数 1
回答已采纳
我使用的是角反应形式，我需要防止任何输入与其他输入的值相同(值只应该是数字(并且是小数，但我也被困在那里)，如果两个或多个输入具有相同的值，我如何使该表单无效？
我将展示我的代码以帮助我添加任何代码：
ts和html中的三个输入示例(36个中的3个)：
在ts文件中：
this.voucherForm = new FormGroup({
'Restaurant_Name': new FormControl(this.voucher.Restaurant_Name, Validators.pattern("^[0-9]*$")),
浏览 3提问于2019-11-15得票数 0
回答已采纳
我们首先为我们的with项目(目前版本为12 )实现了一个组件库。
目前，我们将第一个组件作为蓝图来实现。组件应该用标签、mat错误、一些验证器等封装一个物质输入(matInput)，以便开发人员只需要编写s.th。喜欢
<our-input max-length="5" required label="fancy field" [formControlName]="fancyField">
得到一个完全设计的输入字段。顺便说一句。我知道不应该将来自FormControl和模板的验证混合起来，但这只是为了示例；在现实生活中，验证将由组
浏览 6提问于2022-07-07得票数 0
2回答
我有一个父组件，它的表单包含两个日期选择器组件，它们是formControls。它们代表startDate和endDate。
我还有两个自定义验证器指令，我在这两个表单控件上使用。一个是检查给定的输入日期是否小于控件的日期。如果给定的输入日期大于控件的日期，则进行其他检查。
这两个验证器允许我验证startDate和endDate的下列条件：
startDate和endDate必须在未来(比现在晚)
startDate必须在endDate之前
所以，我的问题是，当我更新其中一个日期时，验证只发生在我更新的日期。例如：
我首先将startDate设置为一个有效的未来日期。
浏览 5提问于2016-12-21得票数 0
我开始了解Angular 9 Reactive forms的表单验证。 我有一个用于反应式表单的表单组。我的表单中只有两个输入元素，表单控件areaNameFormComponent和areaDescriptionFormComponent组成了这个表单。在他们提交之前，我还想确保他们至少从嵌套在表单中的组件中选择了一种状态。我的第三个FormControl "statesChosenFormComponent“与此相关，但我不能让FormGroup再次检查它的有效性，以查看"statesChosen”数组是否添加了任何状态。 this.naturalAreaForm
浏览 26提问于2019-09-10得票数 2
我有这个表单
this.form = new FormGroup({
someField: new FormControl(''),
someOtherField: new FormControl(''),
cpf: new FormControl('', [ CustomFormValidators.isValidCPF ]),
});
而这个CustomValidator:
static isValidCPF(control: AbstractControl): Vali
浏览 6提问于2021-12-20得票数 0
回答已采纳
2回答
我有一个具有两个控件(port_start和port_end)的反应性表单，这些控件具有以下要求：
两者都必须有一个值
它们的值必须在0到65535之间。
port_start值必须小于port_end值
这就是我迄今为止尝试过的：
[...]
this.formModel.addControl('port_start',
new FormControl(object.port_start ? object.port_start : 0,
[Validators.required, Validators.min(0), Validators.ma
浏览 0提问于2018-04-18得票数 11
回答已采纳
当动态地向反应式表单添加带有asyncValidation的新FormControl时，表单将从挂起变为有效/无效，但不会触发statusChanges。
我有一个动态修改的表单，在此之后，我订阅了statusChanges。我正在打印表单的状态，我可以检查状态是否发生了变化，但是stausChanges没有被触发。
下面是一个示例。
在此示例中，您可以检查是否有针对statusChanges的console.log订阅。有一个按钮，当单击该按钮时，会添加一个新的FormControl，其中包含一个异步验证，需要1秒才能完成。您可以检查，当您单击按钮时，表单的状态(在html中打印)从挂起变为
浏览 38提问于2019-11-06得票数 3
回答已采纳
1回答
我正在使用Angular和一个Firestore数据库(带有Angularfire2)。为了检查用户名是否已经存在，我创建了一个带有验证函数的自定义验证类。不幸的是，无论验证函数返回的是null还是{ emailTaken: true }，表单似乎仍然无效。如果我将函数重写为只返回null，那么它可以工作，所以我认为错误位于这个函数中--也许它与异步有关？ NameValidator类： import { FirebaseService } from './../services/firebase.service';
import { FormControl } from &
浏览 9提问于2019-10-03得票数 0
回答已采纳
1回答
输入控制有问题，如果我输入501 (无效值)，除非输入失去焦点，否则不会显示mat错误。当用户输入无效的值而不丢失焦点时，如何显示它？这是html
<div class="col-auto form margin-top-17 margin-left-10" [formGroup]="activationPointsFormGroup">
<mat-form-field style="width:230px!important">
<input matInput
浏览 0提问于2018-03-20得票数 2
回答已采纳
我使用Sematinc-UI和Angular2 ReactiveFormsModule表单，我想使用[formControl]来选择multiple。
如果我使用select，它的工作没有问题：
<select class="ui fluid dropdown" [formControl]="myForm.controls.category">
<option *ngFor="let item of categories" value="{{item}}">{{ite
浏览 2提问于2016-10-03得票数 11
2回答
我正在实现自定义验证器以匹配我的组件中的密码。
这是我的component.ts表单声明
this.addUserForm = new FormGroup({
firstname: new FormControl('', [Validators.required]),
lastname: new FormControl('', [Validators.required]),
city: new FormControl(),
address: new FormControl(),
email: new FormControl(''
浏览 1提问于2019-01-02得票数 2
回答已采纳
2回答
这是我的FormGroup
repairFacilityForm = new FormGroup({
languageTypeId: new FormControl("", Validators.required),
repairFacilityId: new FormControl(""),
timeZone: new FormControl("", Validators.required),
name: new FormControl("", Validators.required),
address: new FormCo
浏览 8提问于2017-12-13得票数 3
回答已采纳
我正在尝试为模板驱动的表单编写一个自定义验证器。验证器本身(包括下面的内容)就像字段级验证的魅力。但是它不会更新整个表单的验证状态。换句话说，当所有控件都有效时，表单标记仍然显示class=“ng无效”。
当我从模板中的控件中删除phoneValidator时，一切都正常。
我想知道这是否与接口中定义的registerOnValidatorChange方法有关。我没有在我的自定义验证器中具体实现这一点，但我也不太确定如何使用它：
export interface Validator {
validate(c: AbstractControl): ValidationErrors | n
浏览 0提问于2018-08-27得票数 1
如何实现仅在窗体控件有效时应用的自定义验证器？
像这样的东西是理想的：
static isValid(control: FormControl) {
if (control.valid) {
// custom validation checks here
return {isNotValid: true};
}
return null;
}
但是在这里，control.valid始终是真的，所以它将被应用，即使其他人将使该字段无效。
有办法做到这一点吗？
详细实例
源代码：
app.component.ts
import { Compo
浏览 2提问于2018-01-06得票数 1
回答已采纳
我在Angular6中使用了一个简单的反应式表单。
this.phoneForm = this._formBuilder.group({
oldMac: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('')
])),
newMac: ['', Validators.required],
newModel: ['', [Validators.required]],
targetClu
浏览 1提问于2019-01-22得票数 1
我正在使用formControl验证来验证输入字段，如required，minlength，email等。
"valueChanges“非常适合我，但我想在模糊的输入字段上使用验证。我之所以想这样做，是因为使用验证器的电子邮件验证对用户不太友好，因为用户开始键入电子邮件地址，直到用户完成电子邮件地址，验证错误才会弹出。所以我想在输入的电子邮件地址的模糊上做电子邮件验证。
任何帮助都将不胜感激。
浏览 2提问于2017-10-02得票数 1
如何更改“离子标签”和“离子输入”(边框-底部)当FormControl无效时？如下所示： 有效字段： ? 字段无效： ? City:
浏览 67提问于2019-10-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
