Как я могу передать FormControl в функцию из шаблона?

Question

Допустим, у меня есть это:

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

Я хочу, чтобы моя функция onClick была обобщенной c и установила значение соответствующей FormControl (той, которую я щелкнул).

Как я могу передать соответствующий FormControl в качестве параметра onClick?

Я думал, что смогу извлечь его из свойства control FormControlDirective или FormControlName , но ни один из них не имеет атрибута exportAs.

Answer 1

Я думаю, это то, чего вы хотите достичь.

import { Directive, HostListener, Optional, Output, EventEmitter } from '@angular/core';
import { NgControl, FormControl } from '@angular/forms';

@Directive({
  selector: '[appOnClickControl]' // if you want to target specific form control then use custom selector else you use can use input:
                                   // selector: 'input' to target all input elements
})
export class TestDirective {
  @Output() emitFormControl = new EventEmitter<FormControl>();

  constructor(@Optional() private formControl: NgControl) {
  }


  /**
   * If your only goal is to set value to the form control  then use this
   */
  @HostListener('click')
  onClick() {
    if (this.formControl) {
      this.formControl.control.setValue('test');
    }
  }

  /**
   * If you wanna pass the form control through the function you might use this
   */
  @HostListener('click')
  getFormControl(): void {
      this.emitFormControl.emit(this.formControl.control as FormControl);
  }
}

 <input
  appOnClickControl // use this to initialize directive
  (emitFormControl)="yourMethod($event)" // $event is the clicked form control
  formControlName="test"
></input>

Answer 2

довольно многократно, но я уверен, что вы можете сделать только это:

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

, затем используйте someName в вашей группе форм, чтобы найти элемент управления

onClick(name: string) {
  const fc = this.form.get(name);
  // do whatever
}

Answer 3

В вашем html:

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

А затем определите свою функцию onClick как:

onClick(event): void {
 alert(event.target.value)
}

Редактировать Чтобы получить FormControl:

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

и

onClick(formControl): void {
    formControl.setValue(someValue);
  }

Answer 4

Я не уверен, какой тип значения вы хотите установить, но вы можете использовать директиву атрибута для этого типа обычной операции (если она проста).

Вы можете создать директиву атрибута и установить ее для всех элементов управления формы, директива атрибута logi c автоматически обработает ее для вас. Вы можете определенно настроить значения, передаваемые директивам.

import {Directive, HostListener, ElementRef, Input} из "@ angular / core";

@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>

Пожалуйста, найдите рабочий стек стека здесь: https://stackblitz.com/edit/angular-j1kwch

Answer 5

Не совсем уверен, что вы ищете, но попробуйте, если следующее работает для вас. Для установки значений формы используется метод setValue(). Вы также можете использовать patchvalue, если хотите установить только частичные значения формы.

Шаблон

<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>

Компонент

export class AppComponent  {
   name = 'Angular';
   firstname = new FormControl('');
   groupedform = this.fb.group({
    Name : ['', Validators.required],
    Email: [],
  });

  constructor(private fb:FormBuilder) { }

  updateName() {
    console.log(this.groupedform.value);
  }

  onMouseDown(formControl: any) {
    this.groupedform.setValue({
      'Name': 'sample',
      'Email': 'sample@example.com'
    });
  }

  setEmail(formControl: any) {
    this.groupedform.patchValue({
      'Email': 'sample@example.com'
    });
  }
}

Рабочий пример: Stackblitz

Answer 6

Вы можете использовать переменную шаблона для этого

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

onClick(val) {
console.log(val);}