正文 

当前位置： 首页 > 源码 >

验证不会传播到 Angular 中的自定义表单控件 ng-select

     2023-03-13     112

关键词：

【中文标题】验证不会传播到 Angular 中的自定义表单控件 ng-select【英文标题】：Validation is not propagate to Custom Form Control ng-select in Angular 【发布时间】：2020-06-12 23:43:55 【问题描述】：

我在 Angular 9 应用程序中使用带有自定义表单控件的反应式表单。

我用自定义表单控件包装了我的 ng-select 控件。

我的验证有问题。我将 formControl 设置为必需。 Documentation says ng-invalid css 类应该自动设置为 ng-select。但实际上使用自定义表单控件它不能正常工作。未设置 css 类，但设置了包装器类。我做错了什么还是这是图书馆的问题？

检查堆栈闪电战： https://stackblitz.com/edit/angular-rmvttg-ex63ka?file=src/forms-single-select-example.component.html&fbclid=IwAR2robtd_15khTVhmW59lLhn21HOHl_yYTrCWKaPRmfUt1QVvUn3n8V4Vjo

【问题讨论】：

【参考方案1】：

DiPix，问题在于 Angular 将控件状态 CSS 类添加到您的自定义控件，而不是属于您的内部控件的 ng-select

您可以注入 ngControl 并检查 control.control.invalid 和 control.control.touched

constructor(private injector:Injector)
ngOnInit()

   this.control = this.injector.get(NgControl);

然后你可以使用一些类似的

  <ng-select #mySelect  [ngClass]="'ng-invalid':control?.control.invalid,
                                    'ng-touched':control?.control.touched"
   ....>

另一种方法是询问父母的班级。所以如果你定义了一个像

这样的getter 
get parentClass()

  const match = /class=\"(.*?)\">/.exec(this.element.nativeElement.parentElement.innerHTML);
  return match[0].split('"')[1]


constructor(private element:ElementRef)

你可以使用

<ng-select #mySelect  [ngClass]="parentClass" 
  ...>

你可以在your forked stackblitz看到

注意：无论如何，为了包装一个 ng-select，创建一个自定义表单控件是不必要的，只是一个带有 @Input 的 简单组件

@Input()control:any

你使用 as

    <mycontrol [control]="someForm.get('someControl')"></mycontrol>

你可以看到this another stackblitz变得多么简单

【讨论】：

那么基本上什么时候应该使用自定义表单控件？ 在我看来，如果向控件添加新的外观，自定义表单控件很有用。 datePicker 是“自定义表单控件”的一个很好的例子，多选是另一个很好的例子，或者一个仪表，或者一个在下拉时显示表格的组合，（我怀疑带有掩码的输入）或...... . 如果只想“分组”输入，例如询问号码、到期日期和 CVC 的信用卡-即使显示卡类型-或带有街道、城市、国家和 CP 的一组地址，我更喜欢使用组件。但实际上这只是个人意见。我只是 Angular 的业余爱好者 对我有意义。但我有一个小问题。我已经指示寻找formControlName 属性this.hostElement.nativeElement.nextElementSibling.attributes.formControlName 现在这样的元素不存在，因为我正在使用未在DOM 上显示的[control]。知道如何获得 controlName 吗？【参考方案2】：

您可以通过Input 将FormGroup 向下传递到您的子组件并将其设置为ng-select 来解决此问题：

<mycontrol formControlName="someControl" [parentFormGroup]="someForm" ></mycontrol>

组件：

export class MyControlComponent implements ControlValueAccessor 

  @Input() parentFormGroup: FormGroup;
...

模板：

<ng-select #mySelect
           [formGroup]="parentFormGroup"
...

【讨论】：

在 Angular 4 中，为啥异步验证的嵌套控件不会将其有效性传播到父 FormGroup？

】在Angular4中，为啥异步验证的嵌套控件不会将其有效性传播到父FormGroup？【英文标题】：InAngular4,whydoasynchronouslyvalidatednestedcontrolsnotpropagatetheirvaliditytotheparentFormGroup?在Angular4中，为什么异步验证的嵌套控件不会将其有效性传播... 查看详情

Angular 5 动态表单中的自定义验证器

】Angular5动态表单中的自定义验证器【英文标题】：CustomvalidatorinAngular5dynamicforms【发布时间】：2018-05-2810:54:18【问题描述】：我正在从Angular5中的可配置json创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。... 查看详情

如何使用 Angular 重置自定义表单控件

】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情

将预定义的验证器添加到 Angular 中的自定义组件

】将预定义的验证器添加到Angular中的自定义组件【英文标题】：AddpredefinedvalidatortoacustomcomponentinAngular【发布时间】：2017-10-1008:22:02【问题描述】：我正在开发一个自定义组件，用于Angular中的表单。我正在实现ControlValueAccessor接... 查看详情

Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？

】Angular6.如何在创建的自定义控件中赋予验证状态这个控件？【英文标题】：Angular6.HowinthecreatedCustomControltogivenValidatorstatethiscontol?【发布时间】：2018-12-2509:51:48【问题描述】：我为表单创建了一个自定义控件。我的控件是这样的... 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

如何根据 Angular 2 中的自定义验证规则显示错误消息？

】如何根据Angular2中的自定义验证规则显示错误消息？【英文标题】：HowtodisplayerrormessagebasedoncustomvalidationrulesinAngular2?【发布时间】：2016-11-2817:59:35【问题描述】：我正在使用模板驱动的方法在Angular2中构建表单，并且我已经成... 查看详情

有没有更好的方法将值推送到表单控件，其中数组作为 Angular 中的值

】有没有更好的方法将值推送到表单控件，其中数组作为Angular中的值【英文标题】：IsthereabetterwaytopushavaluetoaformcontrolwithanarrayasavalueinAngular【发布时间】：2021-11-1414:51:20【问题描述】：我目前有一个多选列表，我想从组件中添加... 查看详情

Angular4 中的自定义验证

】Angular4中的自定义验证【英文标题】：CustomvalidationinAngular4【发布时间】：2018-07-2918:52:21【问题描述】：在我的页面中，我有一个简单的表单组。我必须在其中为名称编写自定义验证。this.searchForm=this._formBuilder.group(profileName:newF... 查看详情

Bootstrap 行类不会向下传播到 Angular 中的组件

】Bootstrap行类不会向下传播到Angular中的组件【英文标题】：BootstraprowclassnotpropagatingdowntocomponentsinAngular【发布时间】：2018-03-2011:20:04【问题描述】：我有许多这样声明的控件。<divclass="row"><divclass="col-sm-12"><div>Caption&... 查看详情

Angular 反应式表单自定义控件异步验证

】Angular反应式表单自定义控件异步验证【英文标题】：Angularreactiveformcustomcontrolasyncvalidation【发布时间】：2020-04-0608:48:11【问题描述】：更新：异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。诀窍... 查看详情

Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误

】Angular2/Material-应用到父FormGroup的自定义验证器未显示md错误【英文标题】：Angular2/Material-md-errornotdisplayedwithcustomvalidatorappliedtoparentFormGroup【发布时间】：2018-03-0200:01:12【问题描述】：我在使用Angular(v4.3.6)在模型驱动表单上显示... 查看详情

Angular 2 自定义表单输入

】Angular2自定义表单输入【英文标题】：Angular2customforminput【发布时间】：2016-04-2904:28:29【问题描述】：如何创建与原生&lt;input&gt;标签一样的自定义组件？我想让我的自定义表单控件能够支持ngControl、ngForm、[(ngModel)]。据我... 查看详情

从Angular2中的原始元素获取表单控件

】从Angular2中的原始元素获取表单控件【英文标题】：GetformcontrolfromrawelementinAngular2【发布时间】：2017-08-1316:31:29【问题描述】：假设我正在编写一个用于Angular2表单元素的自定义属性指令。我希望能够像这样使用我的属性：<fo... 查看详情

如何在Angular的自定义控件组件中触摸内部控件？

】如何在Angular的自定义控件组件中触摸内部控件？【英文标题】：HowtotouchinnercontrolincustomcontrolcomponentinAngular?【发布时间】：2021-02-2218:39:12【问题描述】：我有一个带有我自己的自定义控件组件的表单：@Component(selector:"my-app",temp... 查看详情

具有响应式表单的自定义控件

...【发布时间】：2019-11-1503:24:46【问题描述】：我正在使用Angular7，带有反应形式的AngularMaterial控件。我使用带有mat-form-field的AngularMaterial创建了自定义文本(matInputtype="text")、数字(matInputtype="number")、选择(mat 查看详情

模板中的自定义表单验证错误

】模板中的自定义表单验证错误【英文标题】：customformvalidationerrorsintemplate【发布时间】：2020-07-2513:40:12【问题描述】：如何在模板中传递自定义表单验证错误？forms.pydefclean_username(self):inputusername=self.cleaned_data[\'username\']iflen(inpu... 查看详情

Angular 2中元素的自定义验证

】Angular2中元素的自定义验证【英文标题】：CustomValidatononanElementinAngular2【发布时间】：2017-12-3018:19:23【问题描述】：我有一个输入元素&lt;inputtype="text"name="password"&gt;，它不在任何表单内。如何实现任何自定... 查看详情