正文 

当前位置： 首页 > 问答 >

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

     2023-02-22     301

关键词：

【中文标题】从Angular2中的原始元素获取表单控件【英文标题】：Get form control from raw element in Angular2 【发布时间】：2017-08-13 16:31:29 【问题描述】：

假设我正在编写一个用于 Angular2 表单元素的自定义属性指令。我希望能够像这样使用我的属性：

<form [formGroup]="myFormGroup">
  <input type="text" [myHighlight] formControlName="name" />
</form>

在我的指令中，我有这样的东西：

@Directive(selector: '[myHighlight]')
export class MyHighlightDirective 
  constructor (private el: ElementRef) 
    this.el.nativeElement.style.backgroundColor = 'yellow';
  
;

但是现在假设我想对输入控件的所有更改做一些事情。也许我想在每次更改时随机化颜色。

来自Angular2 guide 的HostListener('onChange') 事件在用户在输入框中输入时起作用。但它不会为表单控件上调用的setValue 事件激活，即使emitEvent 设置为true。 The Angular docs on Forms 说 setValue 将导致在表单控件对象上发出 valueChanges 事件。但我不想每次使用时都将它传递给指令，因为这很笨重。

如果指令只有元素引用，还有其他方法可以访问原始表单控件吗？

【问题讨论】：

【参考方案1】：

对我有用的是

@ContentChild(NgModel)
public set model(model: NgModel) 
    ...

您可以使用model.control 访问控件。

【讨论】：

【参考方案2】：

注入 FormControlName 类型的 NgControl

import  NgControl  from '@angular/forms';

@Directive(selector: '[myHighlight]')
export class MyHighlightDirective 
  constructor (private el: ElementRef, private formControl: NgControl) 
    this.el.nativeElement.style.backgroundColor = 'yellow';
    ....
    //listen to validation status
    this.formControl.statusChanges.subscribe((state)=>
       ...
    );
  
;

【讨论】：

【参考方案3】：

Angular DI 助你一臂之力！

您可以使用 Angular 依赖注入系统将 FormControl 附加到指令的宿主元素上。

@Directive(selector: '[myHighlight]')
export class MyHighlightDirective 
  constructor (private el: ElementRef, private formControl: FormControl) 
    // have fun with formControl.valueChanges
    .......

  
;

为什么会这样：

Angular 将指令注册到指令所附加到的元素的注入器中。因此，当您请求特定指令的实例时，第一次查找将首先在主机元素上。 （同样适用于组件）

【讨论】：

当我这样做时，我得到了一个No provider for FormControl!，并且我将FormsModule 导入到我的模块中。当我将FormControl 添加到模块的providers 部分时，我得到Syntax error Can't resolve all parameters for FormControl: (?, ?, ?). at SyntaxError.BaseError 你的应用是否被分成了多个 NgModule？ 是的。我也尝试将我的指令导入到顶部的 AppModule 中，但是当我尝试使用它时并没有使用它，所以我有一个导出它的模块，然后在模板中应用它的模块正在导入该模块。 哪个模块正在导入FormModule？您的 AppModule、声明 MyHighlightDirective 的模块、包含使用 MyHighlightDirective 的组件的模块或其他刚刚导出的共享模块？ MyHighlightDirective 正在导入它，并且在其模板中有输入的模块也在导入它。

如何从包含任何容器中的控件的表单中获取所有控件？

】如何从包含任何容器中的控件的表单中获取所有控件？【英文标题】：HowcanIgetallcontrolsfromaFormIncludingcontrolsinanycontainer?【发布时间】：2010-12-0604:47:36【问题描述】：例如，我需要一种方法来禁用表单中的所有按钮或验证所有文... 查看详情

如何在不知道表单内控件名称的情况下获取表单中的 GET/POST 元素

】如何在不知道表单内控件名称的情况下获取表单中的GET/POST元素【英文标题】：HowtofetchtheGET/POSTelementsinaformwithoutknowingthenameofthecontrolsinsidetheform【发布时间】：2011-03-2804:38:57【问题描述】：我有物品清单。当用户点击一个项目... 查看详情

如何从 Angular 2 中的 QueryList 获取子元素？

】如何从Angular2中的QueryList获取子元素？【英文标题】：HowcanIgetchildrenelementsfromQueryListinAngular2?【发布时间】：2018-01-2409:33:17【问题描述】：我是Angular2的新手。在我看来，在*ngFor中生成的相同子代很少。<ngb-panel*ngFor="letclientofc... 查看详情

从克隆表单元素获取所有 POST

...代码http://jsfiddle.net/marcelo066/d7ehQ/light/，它是从BrianGlaz的原始http://jsfiddle.net/B7bgN/10/更改而来的。它从表单中克隆了一些部分。我的问题是：如何使 查看详情

从表单中的所有选择元素中获取所有选择的选项元素

】从表单中的所有选择元素中获取所有选择的选项元素【英文标题】：Getallselectedoptionselementsfromallselectelementsinaform【发布时间】：2012-09-0914:07:32【问题描述】：大家好，感谢您抽出宝贵时间回答我的问题。我有一个包含6个选择... 查看详情

Angular2- RC6 自定义表单控件不起作用

】Angular2-RC6自定义表单控件不起作用【英文标题】：Angular2-RC6CustomFormControlsNotworking【发布时间】：2017-01-1710:02:25【问题描述】：我已将Angular2RC5应用程序更新为RC6。我根据Thoughtram的this教程开发了一些自定义表单控件。在RC5之前... 查看详情

Angular 2：如何从表单的不同选项中获取选定的值？

】Angular2：如何从表单的不同选项中获取选定的值？【英文标题】：Angular2:Howtogettheselectedvaluefromdifferentoptionsofaform?【发布时间】：2016-04-2906:10:24【问题描述】：我想在表单中使用&lt;select&gt;，让用户能够更新不同&lt;option... 查看详情

angular2中的viewchild和viewchildren

https://segmentfault.com/a/1190000008695459ViewChildViewChild是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在ngAfterViewInit钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，才能正确获取查询的元素。@ViewChild使用模板变量名i... 查看详情

Angular2自定义表单控件防止发射事件

】Angular2自定义表单控件防止发射事件【英文标题】：Angular2customformcontrolpreventemittingevent【发布时间】：2017-06-2423:40:12【问题描述】：在某些情况下，当我更新Angular2表单控件时，我不想触发valueChanges事件（例如，因为更改来自... 查看详情

angular2 复选框表单控件

】angular2复选框表单控件【英文标题】：angular2checkboxformcontrol【发布时间】：2017-02-2212:13:22【问题描述】：对于一个带有绑定到FormControl的字符串值的简单复选框：exportclassCheckboxComponentformControl:FormControl;option:value:string;constructor()t... 查看详情

为自定义控件实现值访问器时，未从事件中的模型获取更新值

...关注下面的文章，我正在尝试在与ngModel和ngControl集成的Angular2中实现自定义控件。文章：http://alm 查看详情

Angular2 - 从元素中删除禁用属性

】Angular2-从元素中删除禁用属性【英文标题】：Angular2-Removingdisabledattributefromelement【发布时间】：2018-01-2505:44:02【问题描述】：我有一个表单，它使用名为ng-select的指令来增强选择输入。在我的设置中，我允许用户进行一些选择... 查看详情

如何从angular2中的observable获取数据

】如何从angular2中的observable获取数据【英文标题】：Howtogetdatafromobservableinangular2【发布时间】：2016-07-2313:23:13【问题描述】：我正在尝试使用rxjs在Angular中打印http调用的结果考虑下面的代码importComponent,Injectable,OnInitfrom\'@angular/cor... 查看详情

如何从表单组中禁用的表单控件中获取值？

】如何从表单组中禁用的表单控件中获取值？【英文标题】：Howtogetvaluesfromdisabledformcontrolsinaformgroup?【发布时间】：2018-09-1510:49:46【问题描述】：我尝试使用表单状态对象初始化我的新FormControl，然后我注意到这个控件不会影响... 查看详情

Angular2 - 使用 debounceTime 测试调用

】Angular2-使用debounceTime测试调用【英文标题】：Angular2-TestingcallwithadebounceTime【发布时间】：2017-05-2906:16:22【问题描述】：我正在使用一个表单控件，该控件使用valueChanges和debounceTime检测更改。我正在编写一个监视itemService的测试... 查看详情

如何修复错误从用户控件中的主窗体获取数据？

】如何修复错误从用户控件中的主窗体获取数据？【英文标题】：Howtofixerrorgetdatafrommainforminusercontrol?【发布时间】：2022-01-1616:34:10【问题描述】：我已经创建了一个小表单和一个用户控件，但是我不知道如何将数据从数据库的... 查看详情

无法从列表控件获取数据

...发布时间】：2014-10-0806:01:29【问题描述】：我正在使用MFC中的列表控件。我编写了代码来将元素插入到对话框中的列表控件中，如下所示：intnIndex=0;for(intcount=0;count<arrResults.GetSize();count++)nIndex=m_cListCtrl.InsertItem( 查看详情

动态禁用控件时显示警告消息 angular2

】动态禁用控件时显示警告消息angular2【英文标题】：Warningmessagedisplayingwhiledisablingcontrolsdynamicallyangular2【发布时间】：2017-03-3115:36:44【问题描述】：我想禁用页面加载中的所有控件，并在用户单击反应式表单中的添加按钮时启... 查看详情