How to get formControlName Programmatically in Angular 5 or above

Question

Need to know, when you have a multiple controls in a form and you want to know to which control user changed so that you can take some actions.

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

Why I need to get formControlName?

as you can see in the image, some fields are edited but not confirmed that's why user sees options to verify or cancel the operation on that specific field. That's why I require to get formControlName of input-changed field so that I can display the options only to that field.

I have searched for its solution but couldn't found on stack-overflow that's why I decided to post this question with answer

Answer 1

You can use that approach:

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

When the input's value changes, the change event occurs, and Angular provides a corresponding DOM event object in the $event variable which this code passes as a parameter to the component's inputChanged() method.

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

Reference link: https://angular.io/guide/user-input

Another alternative more elegant:

template

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

component class

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');
  }
}

See the complete example in the Stackbliz:
https://stackblitz.com/edit/form-builder-example