web-dev-qa-db-ja.com

プログラムでformControlNameをAngular 5以上で取得する方法

フォームに複数のコントロールがあり、ユーザーがいくつかのアクションを実行できるように、どのコントロールに変更したかを知りたい場合。

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

formControlNameを取得する必要があるのはなぜですか？

画像で確認できるように、一部のフィールドは編集されていますが確認されていません。そのため、特定のフィールドでの操作を確認またはキャンセルするためのオプションが表示されます。そのため、フィールドにのみオプションを表示できるように、入力変更フィールドのformControlNameを取得する必要があります。

enter image description here

私はその解決策を検索しましたが、stack-overflowで見つかりませんでした。そのため、この質問を回答付きで投稿することにしました

angularangular5angular-reactive-formsangular6reactive-forms
4
MWN

この入力フィールドからformControlNameを取得するには

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

属性formControlNameを取得するだけです

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

あなたはそのアプローチを使うことができます：

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

入力の値が変更されると、変更イベントが発生し、Angularは$ event変数に対応するDOMイベントオブジェクトを提供します。このコードは、このコードがパラメーターとしてコンポーネントの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-b​​uilder-example

2
Ricardo Ferreira

Reactive Formsを使用している場合、コンポーネントテンプレートでformControlNameを宣言する代わりに、次のようにComponent TSでフォームを作成できます。

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

また、Reactiveフォームでは、イベントを介して入力の変更を処理する代わりに、次のようにフォームフィールドに "value_changes"を登録することにより、入力値の変更を処理する特権を提供します。

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

このように、常にコンポーネントTS定義のリアクティブフォームグループで定義されているformControlNameを使用します。

次のようにコンポーネントテンプレートで使用されます。

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

ElementRefを使用してformControlName属性を取得できます

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);
    }
}
1
Vishal Maru

私が見つけた最も簡単な方法：

HTML：

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

TS：

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

すべての入力にidを追加する必要はありません。パラメータとして$eventを渡すだけです。

0
Ivan Sveshnikov

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

0
Sherwin Ablaña Dapito