Как получить formControlName программно в Angular 5 или выше

Question

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

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

Почему мне нужноget formControlName?

, как вы можете видеть на изображении, некоторые поля редактируются, но не подтверждаются, поэтому пользователь видит опции для проверки или отмены операции над этим конкретным полем.Вот почему мне нужно получить formControlName измененного поля ввода, чтобы я мог отображать параметры только для этого поля.

Я искалдля решения, но не удалось найти на stack-overflow, поэтому я решил опубликовать этот вопрос с ответом

Answer 1

Самый простой способ, который я нашел:

HTML:

<input formControlName="item_name" (input)="inputChanged($event)">

TS:

inputChanged(e) {
  log(e.target.getAttribute('formControlName')) // item_name 
}

Нет необходимости добавлять id в каждый вход,Просто передайте $event в качестве параметра.

Answer 2

Атрибут formControlName можно получить с помощью ElementRef

HTML-код

 <input formControlName="item_name" #itemName>

компонентный файл класса

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

export class AppComponent implements OnInit { 

    // itemName name is reference variable #itemName

    @ViewChild('itemName') itemName: ElementRef;

    ngOnInit() {
        this.itemName.nativeElement.getAttribute('formControlName');
    }
}

Получить изменение значения formControllName

<input type="text" formControlName="item_name" #itemName (input)="inputChanged($event.target.value)">

   export class AppComponent {
    inputChanged(searchValue: string) {
    console.log(searchValue);
    }
}

Answer 3

Если вы используете реактивные формы, тогда вместо объявления formControlName в шаблоне компонента вы можете создать форму в Компонент TS следующим образом:

 this.myForm= this.formBuilder.group({
      'item_name' : [null, Validators.compose([Validators.required])]
    });

ТакжеВместо обработки входных изменений через событие, Реактивные формы предоставляют вам право обрабатывать входные изменения, регистрируя « value_changes » в поле формы следующим образом:

this.myForm.get('item_name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;
  });

Таким образом, вы всегдаиспользуйте formControlName , как определено в группе Реактивная форма в определении TS компонента.

Он будет использоваться в шаблоне компонента следующим образом:

<input formControlName="item_name" />

Answer 4

Вы можете использовать этот подход:

<input formControlName="item_name" #itemName (change)="inputChanged($event)">

Когда значение входа изменяется, происходит событие изменения, и Angular предоставляет соответствующий объект события DOM в переменной $ event, которую этот код передает как параметр вметод inputChanged () компонента.

inputChanged (event: any) { // without type info
this.myValue = event.target.value;
  }
}

Ссылочная ссылка: https://angular.io/guide/user-input

Еще один более элегантный вариант:

шаблон

<form [formGroup]="usersForm">
  <input type="text" formControlName="name" placeholder="name"/>
</form>

класс компонентов

export class AppComponent implements OnInit, OnDestroy {
  usersForm: FormGroup;
  message: string;

  private subscriptions$ = new Subscription();

  constructor( private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.usersForm = this.formBuilder.group({
      name: '',
      age: '',
      gender: '',
    });

    this.subscriptions$.add(this.name.valueChanges.subscribe(value => {
      // Do someting
    }));
  }

  ngOnDestroy(): void {
    this.subscriptions$.unsubscribe();
  }

  get name(): AbstractControl {
    return this.usersForm.get('name');
  }
}

См. Полный пример в Stackbliz:
https://stackblitz.com/edit/form-builder-example

Answer 5

Если вы используете Angular Reactive Forms, вы можете использовать что-то вроде этого

Для вашего ввода HTML

<input formControlName="item_name" #itemName (change)="inputChanged()">

Для вашего компонента

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

formName: FormGroup;
myValue: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.formName = this.formBuilder.group({
      'item_name' : [null, Validators.compose([Validators.required])]
    });

    window.scroll(0,0);
}

inputChanged(){
    this.myValue = this.formName.get('item_name').value;
}

Ссылка: https://angular.io/guide/form-validation

Answer 6

из этого поля ввода, чтобы получить formControlName

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

Вам нужно только получить атрибут formControlName

inputChanged(element: HTMLElement) {
  log(element.getAttribute('formControlName')) // item_name 
}