web-dev-qa-db-fra.com

Comment obtenir formControlName par programme en Angular 5 ou supérieur

Besoin de savoir, lorsque vous disposez de plusieurs contrôles dans un formulaire et que vous souhaitez savoir à quel contrôle l'utilisateur a changé afin que vous puissiez effectuer certaines actions.

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

Pourquoi dois-je obtenir formControlName?

comme vous pouvez le voir sur l'image, certains champs sont modifiés mais non confirmés, c'est pourquoi l'utilisateur voit des options pour vérifier ou annuler l'opération sur ce champ spécifique. C'est pourquoi j'ai besoin d'obtenir formControlName du champ modifié en entrée pour que je puisse afficher les options uniquement dans ce champ.

enter image description here

J'ai recherché sa solution mais je n'ai pas trouvé sur stack-overflow c'est pourquoi j'ai décidé de poster cette question avec réponse

angularangular5angular-reactive-formsangular6reactive-forms
4
MWN

à partir de ce champ de saisie pour obtenir formControlName

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

Il vous suffit d'obtenir l'attribut formControlName

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

Vous pouvez utiliser cette approche:

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

Lorsque la valeur de l'entrée change, l'événement change se produit et Angular fournit un objet d'événement DOM correspondant dans la variable d'événement $ que ce code transmet en tant que paramètre à la méthode inputChanged () du composant.

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

Lien de référence: https://angular.io/guide/user-input

Une autre alternative plus élégante:

modèle

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

classe de composants

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

Voir l'exemple complet dans le Stackbliz:
https://stackblitz.com/edit/form-builder-example

2
Ricardo Ferreira

Si vous utilisez des formulaires réactifs, au lieu de déclarer formControlName dans le modèle de composant, vous pouvez créer un formulaire dans Component TS comme suit:

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

De plus, au lieu de gérer les modifications d'entrée via un événement, les formulaires réactifs vous offrent le privilège de gérer les modifications de valeur d'entrée en enregistrant "value_changes" dans le champ de formulaire comme suit:

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

De cette façon, vous utilisez toujours le formControlName comme défini dans le groupe de formulaires réactifs dans la définition du composant TS.

Il sera utilisé dans le modèle de composant comme suit:

<input formControlName="item_name" />
1
Shubhi Sood

Vous pouvez obtenir l'attribut formControlName en utilisant ElementRef

Code HTML

 <input formControlName="item_name" #itemName>

fichier de classe de composant

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

Obtenir la valeur de changement de formControllName

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

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

La manière la plus directe que j'ai trouvée:

HTML:

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

TS:

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

Pas besoin d'ajouter un id dans chaque entrée. Passez juste $event comme paramètre.

0
Ivan Sveshnikov

Si vous utilisez Angular Reactive Forms, vous pouvez utiliser quelque chose comme ceci

Pour votre entrée HTML

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

Pour votre composante

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

Lien de référence: https://angular.io/guide/form-validation

0
Sherwin Ablaña Dapito