如何在angular 4中使用“app-form-group-control- Validation display”显示自定义验证错误信息
在Angular 4中，可以使用"app-form-group-control-validation-display"来显示自定义验证错误信息。这个指令可以用于在表单控件的旁边或下方显示验证错误消息。
首先，确保你已经在Angular项目中引入了FormsModule。然后，在你的组件模板中，找到需要显示验证错误信息的表单控件，并在其外部包裹一个div元素。给这个div元素添加"app-form-group-control-validation-display"指令，并传入表单控件的引用作为参数。
下面是一个示例：
<form>
<div class="form-group" app-form-group-control-validation-display [control]="myFormControl">
<label for="myInput">My Input</label>
<input type="text" id="myInput" class="form-control" [formControl]="myFormControl">
</div>
</form>在上面的示例中，我们使用了一个名为"myFormControl"的FormControl实例来表示表单控件。通过将这个FormControl实例传递给"app-form-group-control-validation-display"指令的"control"参数，我们告诉Angular要在这个div元素中显示与该表单控件相关的验证错误信息。
请注意，"app-form-group-control-validation-display"指令是一个自定义指令，你需要在你的应用中定义它。你可以在你的组件文件中创建一个名为"FormGroupControlValidationDisplayDirective"的指令，并在其中实现显示验证错误信息的逻辑。
这样，当表单控件的验证失败时，"app-form-group-control-validation-display"指令就会根据FormControl的错误信息动态显示相应的错误消息。
关于Angular 4中自定义验证错误信息的更多信息，你可以参考腾讯云的Angular开发文档：Angular开发文档。
希望这个答案能够满足你的需求，如果有任何问题，请随时提问。
相关·内容
3回答
通过查询组件的模板获取FormControl实例
angular、angular2-forms
我有一个自定义FormFieldComponent，它封装了表单字段的HTML显示逻辑：
@Component({
selector: 'field',
template: `
<div class="form-group">
<label class="control-label">{{label}}</label>
<ng-content></ng-content> <!-- Will display the field -->
浏览 17提问于2016-11-18得票数 14
回答已采纳
1回答
我表单中的字段不绑定到以角表示的模型属性。
angular
我在学角。我的表单没有将输入字段绑定到模型属性。
我有一个角色形式和一个榜样。我已经向FormsModule ins导入了app.module.ts，但仍然什么也没有。提交表单工作良好，但表单中的数据没有绑定到模型。我甚至检查了表单中提交的角色对象，但是它显示模型属性是空的。
任何帮助都将不胜感激。
export class Role {
id: string;
createdAt: Date;
createdBy: string;
modifiedAt: Date;
modifiedBy: string;
code: string;
r
浏览 0提问于2019-08-16得票数 0
回答已采纳
3回答
如何启动*ngIf指令，以便在从输入控件导航时进行验证
angular、angular-reactive-forms
我对棱角不熟悉，我正在做一种反应形式。
我在'em‘标记上有一个*ngIf指令，它验证输入文本值是否有效，如果不有效，应该将'em’标记注入HTML并显示“必需”
<em *ngIf="!validateLastName()">Required</em>
每当我把鼠标从输入控件移开时，我如何才能得到这个*ngIf？
以下是整个div：
<div class="form-group" [ngClass]="{'error' :!validateLastName()}">
浏览 0提问于2019-01-17得票数 1
回答已采纳
1回答
在这个用例中，ngModel指令究竟是如何工作的？
angular、angular-directive、angular-ngmodel
我是一个完全的角度初学者，我对NgModel指令及其可能的用例有一些概念上的怀疑。
阅读角官方文档：
我只能读到：
从域模型创建FormControl实例，并将其绑定到窗体控件元素。
在我看来，这个FormControl应该是一个对象，它保存插入到表单字段和相关字段状态中的值(例如，对于验证文档)。这是正确的吗？现在，我对具体的用例有了一些怀疑。
那么，让我们举一个例子。
我有一张表格：
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<div class="form-gr
浏览 6提问于2020-05-06得票数 1
回答已采纳
1回答
角子分量和验证消息
angular
我有以下带有表单的子组件，当父组件提交主表单时，我需要在我的控制下显示错误消息。
import {
Component, ChangeDetectorRef, forwardRef,
NgModule, OnInit
} from '@angular/core';
import {
FormGroup, FormControl, FormBuilder, Validators,
NG_VALIDATORS, Validator, AbstractControl, ValidationErrors
} from '@angular/forms';
浏览 0提问于2018-10-04得票数 1
回答已采纳
2回答
角自定义形状控制
angular、typescript
嗨，我正在尝试创建一组自定义的反应性表单控件，以便于在模板中使用。到目前为止，我已经成功地使用ControlValueAccessor接口创建了一个。表单的编辑工作正常，但我无法用它显示错误消息。有人能建议在自定义控件html中传递和显示错误消息的方法吗？
这是我的密码
input-form.component.html
<div style="font-size: 12px">
<mat-form-field appearance="outline">
<mat-label>{{ label }}</mat
浏览 15提问于2022-06-08得票数 1
2回答
显示来自另一个HTML元素中一个元素的自定义指令的结果
angular
我希望将自定义验证指令的输出消息显示到表单上的另一个HTML元素中。如何捕获/引用自定义指令(no-special-chars.directive.ts)的输出？ 指令(no-special-chars.directive.ts) import { Directive } from '@angular/core';
import { Validator,
FormControl,
NG_VALIDATORS,
ValidationErrors} from "@angular/forms";
@Direct
浏览 14提问于2019-03-09得票数 0
回答已采纳
6回答
TypeError: this.form._updateTreeValidity不是一个函数
javascript、angular、validation、typescript、angular2-forms
我目前使用的棱角形式版本2.0.0，并试图制造一个联系我们的模式与接触形式在里面。
在加载ContactComponent之后，我立即得到：
例外: this.form._updateTreeValidity不是一个函数
我已经看过一些其他堆栈文章，建议使用FormGroup而不是FormBuilder在组件构造函数中插入表单对象现在是新API的标准，所以我已经更新了它。
我导入ReactiveFormsModule和FormsModule以及所有与表单相关的组件，错误似乎与模块无关。
我的TypeScript没有在编译时抛出错误，似乎能够找到所有的FormGro
浏览 3提问于2016-11-30得票数 38
回答已采纳
2回答
Angular :如何从HTML访问表单组中的表单控件
angular、contenteditable、angular-forms
我正在尝试在HTML中显示表单控件"name“
表单控件"name“分组在表单组中："sample”
我不知道层次结构
下面是HTML代码：
<p contenteditable="true" [formControl]="name"> </p>
<div>
FORM GROUP Value : {{ sample.value | json }}
<br>
FORM CONTROL VALUE : {{sample.value.name}}
</div>
浏览 0提问于2019-11-14得票数 0
4回答
基于交叉场的角度数据验证
angular、angular-reactive-forms
我有一个角度反应表单，其中我想验证录取日期，它的最小日期是出生日期，我如何才能基于交叉字段验证它 组件ts： ngOnInit(){
this.userForm = this.formBuilder.group({
'birthDate':[''],
'admissionDate': ['']
});
}
}
@Component({
selector: 'app-plan-admission-date',
te
浏览 25提问于2019-02-10得票数 1
回答已采纳
2回答
自定义密码匹配验证器无法在angular5中工作。
angular、validation、angular5、angular2-forms、customvalidator
我正在实现自定义验证器以匹配我的组件中的密码。
这是我的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回答
角反应形式的错误警报会延迟一步出现。
angular、angular-reactive-forms
我使用角8，我试图创建一个与反应形式的注册表格。我创建了一些警告消息来显示验证错误。
但是，显示的是前面的警报，而不是当前的警报！(迟一步)
app.component.ts文件：
import { Component } from '@angular/core';
import { FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl:
浏览 4提问于2019-10-25得票数 2
回答已采纳
2回答
显示错误信息按钮登录，当条件是错误的(静态用户名和密码)的角度？
angular、forms、authentication、angular-reactive-forms
我有个问题一直困扰着我。我需要为工作做一个小任务。
因此，它是一个登录页面(不需要注册)和一个登录表单(用户名、密码和按钮)。该按钮触发一个doLogin函数，该函数检查用户名是否为admin，密码是否为admin。如果用户名和密码是正确的，它允许您(重定向)到主页。如果用户名和密码不正确，则应该在“登录”按钮下显示错误消息(用户名或密码不正确)。
我已经用验证器、FormBuilder和其他东西尝试了很多东西。如果条件不对，我可以console.log消息，只是不知道如何在登录页面的按钮下显示它。
这是我的登录组件
login.component.ts
import { Component,
浏览 4提问于2021-10-30得票数 1
回答已采纳
4回答
访问自定义角度组件中的FormControl
angular、angular-reactive-forms、angular-components
我正在创建一个自定义角组件，当我的FormControl (反应性表单)无效时，它会显示一个错误工具提示。但是，我不知道如何访问自定义组件中的FormControl来检查它是否被标记为有效。
我想要完成的
<div [formGroup]="form">
<input formControlName="name" type="text" />
<custom-validation-message formControlName="name">My special erro
浏览 7提问于2019-12-28得票数 6
回答已采纳
3回答
角9-不能绑定到“formGroup”，因为它不是“form”的已知属性
javascript、angular、typescript
我的代码环境是角9，当我设置反应性表单时，遇到了以下错误：
error NG8002:无法绑定到“formGroup”，因为它不是“form”的已知属性。
我在Google和StackOverflow上做了一些研究，但没有找到与使用角9相同的问题，但是，根据其他帖子的建议，我确实将ReactiveFormsModule导入到app.module.ts、routing.module.ts中，同时也将ReactiveFormsModule导入到app.module.ts和routing.module.ts中，同时也导入了菜谱-recipe.Compent.spec.ts文件。然而，错误不断地出
浏览 4提问于2020-03-29得票数 3
回答已采纳
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
回答已采纳
2回答
自定义验证器无法以角6响应形式访问窗体
javascript、angular、typescript、validation
我正在尝试为响应形式创建一个验证密码验证，但是在控制台中不断地返回一个无法读取未定义错误的属性“get”，我找不到错误的地方。
我尝试过以各种方式访问密码字段，但只获得不同类型的不能访问，不存在错误
这是Ts代码：
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { NgForm, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms&#
浏览 0提问于2018-07-02得票数 2
2回答
错误TypeError:在尝试将FormArray of FormGroups列为角时，无法读取未定义的属性“无效”
javascript、angular、forms
我有一个可以根据客户需求修改的项目。为了获取一个具有不同修改的项目列表，我决定创建一个表单，在该表单中，他们可以添加任意数量的项目，并为每个项选择规范。为此，我需要创建一个FormArray of FormGroups。一切都必须编译，但当程序试图呈现形式: error TypeError:无法读取未定义的属性“无效”时，我遇到了一个错误
下面是我的app.component.ts (items和addItem())的代码
import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
浏览 0提问于2020-03-19得票数 0
回答已采纳
3回答
如何在ngFor中使用反应式表单
angular、angular-reactive-forms、reactive-forms
用户数组可以有多个元素(用户)。在模板中，我迭代了这个数组，并为每个元素添加了一个表单。现在，每个表单都绑定到相同的表单组值。如果我为第一个用户填写表单，所有表单的提交按钮都会变为启用状态。如何将每个表单指向唯一的formGroup或唯一变量？
组件：
import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms';
...
export class UserComponent implements OnInit {
form: FormGroup;
@input users:
浏览 0提问于2018-07-27得票数 11
回答已采纳
5回答
将FormControl传递给子组件-没有未指定名称的窗体控件的值访问器
angular、angular-reactive-forms、angular-forms
我有一个输入组件customInput，它创建了一个经典的输入字段，并添加了一些布局-香料，没有额外的逻辑。
我想将一个formControl传递给它，将它绑定到它包含的输入。
应该像这样使用：
<form [formGroup]="form">
<custom-input [formControl]="form.controls['control']"></custom-input>
</form>
自定义输入中的：
export class HidInputFieldComponent {
浏览 1提问于2018-11-01得票数 17
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
