В Angular реактивные формы предоставляют мощный способ обработки входных данных формы и их значений. Одной из распространенных задач является получение значения определенного элемента управления в форме. В этой статье мы рассмотрим несколько способов добиться этого на примерах кода.

Метод 1. Использование метода getформы.
Метод getпозволяет получить доступ к определенному элементу управления по его имени. Вот пример:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name">
    </form>
    <button (click)="getValue()">Get Value</button>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: [''],
    });
  }
  getValue() {
    const nameControl = this.myForm.get('name');
    const value = nameControl.value;
    console.log(value);
  }
}

Метод 2: использование ссылочной переменной шаблона
Вы также можете использовать ссылочную переменную шаблона для доступа к значению элемента управления непосредственно в шаблоне:

<form [formGroup]="myForm">
  <input type="text" formControlName="name" #nameInput>
</form>
<button (click)="getValue(nameInput.value)">Get Value</button>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name" #nameInput>
    </form>
    <button (click)="getValue(nameInput.value)">Get Value</button>
  `,
})
export class MyFormComponent implements OnInit {
  @ViewChild('nameInput', { static: false }) nameInput: ElementRef;
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: [''],
    });
  }
  getValue(value: string) {
    console.log(value);
  }
}

Метод 3: использование valueChanges Observable
Реактивные формы Angular предоставляют Observableпод названием valueChanges, который выдает текущее значение элемента управления при каждом его изменении. Вы можете подписаться на этот наблюдаемый объект, чтобы получить значение элемента управления:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name">
    </form>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: [''],
    });
    this.myForm.get('name').valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

В этой статье мы рассмотрели три различных метода получения значения элемента управления в реактивных формах Angular. Используя метод getформы, используя ссылочные переменные шаблона или подписываясь на наблюдаемую valueChanges, вы можете легко получать доступ и работать со значениями отдельных элементов управления формы. Благодаря этим методам в вашем наборе инструментов вы будете хорошо подготовлены к обработке данных форм в приложениях Angular.