Javascript 如何将FormControl从模板传递给函数？

假设我有这个：

<input formControlName="someName" (click)="onClick()">

我希望我的

onClick

函数是泛型的，并设置相应的

FormControl

（我单击的那一个）的值

如何将相关的

FormControl

作为

onClick

的参数传递

我想我可以从或的

控件

属性中检索它，但它们都没有

exportAs

属性。

在html中：

<input formControlName="someName" (click)="onClick($event)">

编辑 要获取FormControl，请执行以下操作：

<input formControlName="someName" (click)="onClick(Form.get('someName'))">

您可以为此使用模板变量

onClick（val）{
console.log（val）；}

有点重复，但你肯定只能这样做：

<input formControlName="someName" (click)="onClick('someName')">

---

不太确定你想要什么，但试试下面的方法是否适合你。它使用方法为表单设置值。如果只想设置窗体的部分值，也可以使用

模板

<form [formGroup]='groupedform' >
  <label>Name:  <br>
    <input type="text" formControlName='Name' required (mousedown)="onMouseDown(groupedform)"/>
  </label>
  <br>
  <br>
  <label>Email:  <br>
    <input type="email" formControlName='Email' required (mousedown)="setEmail(groupedform)"/>
  </label>
  <p>
  <button type="submit" [disabled]="!groupedform.valid" (click)="updateName()">Update Name</button>
  </p>
</form>

---

工作示例：

我不确定要设置哪种类型的值，但您可以对这种类型的常见操作使用属性指令（如果很简单的话）

您可以创建一个属性指令并在所有表单控件上设置，属性指令逻辑将自动为您处理它。您可以明确地配置传递给指令的值

从“@angular/core”导入{Directive，HostListener，ElementRef，Input}

现在，只要将这些指令和表单控件一起使用并传递值，就可以使用数据绑定

<form [formControl]="myForm">
  Firstname:<input type="text" fromControlName="firstname" [clickMe]="'first value'" />
<br>
Lastname:<input type="text" fromControlName="lastname" [clickMe]="'last value'" />
</form>

名字：


姓氏：

---

请在这里找到有效的stackblitz:

我认为这就是您想要实现的目标

import{Directive，HostListener，可选，Output，EventEmitter}来自“@angular/core”；
从'@angular/forms'导入{NgControl，FormControl}；
@指示({
选择器：'[appOnClickControl]'//如果要针对特定的表单控件，请使用自定义选择器，否则可以使用输入：
//选择器：“输入”以所有输入元素为目标
})
导出类TestDirective{
@Output（）emitFormControl=新的EventEmitter（）；
构造函数（@Optional（）private formControl:NgControl）{
}
/**
*如果您的唯一目标是为表单控件设置值，那么请使用
*/
@HostListener（'单击'）
onClick（）{
if（this.formControl）{
this.formControl.control.setValue（'test'）；
}
}
/**
*如果要通过函数传递表单控件，可以使用
*/
@HostListener（'单击'）
getFormControl（）：void{
this.emitFormControl.emit（this.formControl.control作为formControl）；
}
}

---

您可以使用传递的事件并从中获取属性名称：

<input type="text" class="form-control" formControlName="yourName" (blur)="yourMethod($event)" />

---

我不想要HTML元素，我想要

FormControl

编辑我的答案以获得FormControl。这将传入输入元素。不是表示我在

FormGroup

结构中找到控件的formcontrol，它不一定是

this.form.get（name）

（可能嵌套在

FormGroup

，

FormArray

等中）。因此，我不能有一个唯一的

onClick

通用实现，您可以传递名称以获得类似“nested.property.name”的结果要访问嵌套表单，直到不允许

onClick

成为泛型。在这种情况下，如果不直接通过在模板中调用get来传递表单控件，它的泛型大致与您将获得的泛型相同。我认为，更好的做法是在模板中执行较少的操作，而是围绕“泛型”编写一个适配器函数函数我添加了一个答案，希望它能完成您的任务。不，我的问题比

单击事件更广泛，更多的是关于如何将
窗体控件作为函数的参数传递，鉴于此
FormControl
可以是由多个
FormGroup
和
FormArray
组成的结构的任何节点，我建议您编辑您的问题，并根据您的确切要求进行适当更新。我已经为您留下了一个答案。它是否满足您的要求。@satishhrestha是的，我对您投了更高的票
onClick(name: string) {
  const fc = this.form.get(name);
  // do whatever
}

<form [formGroup]='groupedform' >
  <label>Name:  <br>
    <input type="text" formControlName='Name' required (mousedown)="onMouseDown(groupedform)"/>
  </label>
  <br>
  <br>
  <label>Email:  <br>
    <input type="email" formControlName='Email' required (mousedown)="setEmail(groupedform)"/>
  </label>
  <p>
  <button type="submit" [disabled]="!groupedform.valid" (click)="updateName()">Update Name</button>
  </p>
</form>

@Directive({
  selector: '[clickMe]'
})
export class ClickDirective {
  @Input('clickMe') clickValue:string;
  constructor(private elementRef: ElementRef){}

  @HostListener('click') onClick() {
    this.elementRef.nativeElement.value = this.clickValue;
  }
}

<form [formControl]="myForm">
  Firstname:<input type="text" fromControlName="firstname" [clickMe]="'first value'" />
<br>
Lastname:<input type="text" fromControlName="lastname" [clickMe]="'last value'" />
</form>

<input type="text" class="form-control" formControlName="yourName" (blur)="yourMethod($event)" />

yourMethod(event: any) {
  const controlName = e.target.getAttribute('formcontrolname');
  this.formGroup.get(controlName); // this is your FormControl
  ....
}