Question

需要知道的是，如果表单中有多个控件，并且您想知道哪个控件用户已更改，那么您可以采取一些操作。

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

为什么我需要获取formControlName？

正如您在图像中看到的，某些字段已经过编辑但未确认，这就是用户看到用于验证或取消该特定字段上的操作的选项的原因。这就是为什么我需要获得输入更改字段的formControlName，以便我只能向该字段显示选项。

我已经搜索了它的解决方案，但在stack-overflow找不到这就是为什么我决定发布这个问题的答案

Answer 1

从此输入字段获取formControlName

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

您只需要获取属性formControlName

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

Answer 2

您可以使用该方法：

<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

Answer 3

如果您使用的是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" />

Answer 4

您可以使用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);
    }
}

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

我发现的大多数简单方法：

HTML：

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

TS：

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

无需在每个输入中添加id。只需传递$event作为参数即可。

Answer 7

像FormGroup和FormControl这样的活动表单实例具有valueChanges方法，该方法返回可观察到的，发出最新值的方法。因此，您可以订阅valueChanges来更新实例变量或执行操作。

示例

class myData {
  constructor(locationProps) {
    this.locationProps = locationProps;
    this.updateData();
  }

  getTimes(date = null) {
    date = date === null ? moment().format('DD/MM/YYYY') : date;
    var data = this.getData();
    return data ? data[date] : [];
  }

  getSpeadsheetUrl() {
    return config.SpeadsheetUrl[this.locationProps]; // -----> How to pass this locationProps ?
  }
}


function Daily({ locationProps = 1, root }) {
  const context = useContext(ThemeContext);
  const localization = useCallback(() => {
    if (root && cookies.get('location') !== undefined) {
      return cookies.get('location');
    }
    return locationProps;
  }, [locationProps, root]);

  const getTimes = () => {
    var _data = new myData(locationProps);
    return _data.getTimes();
  };
}

请注意，初始化表单后，我们如何在ngOnInit生命周期挂钩中调用onChanges方法。这是我们的onChanges方法的内容：

myForm: FormGroup;
formattedMessage: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: '',
    email: '',
    message: ''
  });

  this.onChanges();
}

您还可以侦听特定表单控件（而不是整个表单组）上的更改：

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =
    `Hello,

    My name is ${val.name} and my email is ${val.email}.

    I would like to tell you that ${val.message}.`;
  });
}

如何在Angular 5或更高版本中以编程方式获取formControlName

7 个答案: