Как передать название формы в .html в .ts?

В Angular есть несколько способов передачи данных из шаблона (.html) в компонент (.ts).

Один из способов - это использование привязки данных через двустороннюю привязку с помощью директивы ngModel. Чтобы передать название формы, вы можете использовать переменную, связанную с директивой ngModel. Для этого в .html файле вы можете создать элемент формы с директивой ngModel, которая будет связана с переменной в компоненте:

<form #myForm="ngForm">
  <input type="text" [(ngModel)]="formName">
</form>

В данном примере мы создали элемент формы и присвоили ему имя myForm с помощью #. Также мы создали поле ввода, которое связано с переменной formName при помощи [(ngModel)]. Теперь, когда пользователь вводит что-то в это поле, значение переменной formName в компоненте будет автоматически обновляться.

В компоненте (.ts) вы можете получить доступ к значению формы через переменную formName, например, в обработчике события отправки формы:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: './my-component.html'
})
export class MyComponent {
  formName: string;

  onSubmit() {
    console.log('Form Name:', this.formName);
  }
}

В данном примере у нас есть переменная formName, которая будет содержать значение названия формы. Когда форма отправляется, вызывается метод onSubmit(), и мы можем использовать значение formName для выполнения нужной логики.

Еще один способ передачи данных из .html в .ts - это использование событий (event binding). Вы можете создать собственное событие в компоненте и передать ему значение из шаблона при помощи привязки событий:

В .html файле:

<input type="text" (input)="onFormNameChange($event.target.value)">

В .ts файле:

onFormNameChange(value: string) {
  console.log('Form Name:', value);
}

В данном примере мы создали привязку события (input), которая вызывает метод onFormNameChange() в компоненте и передает ему значение поля ввода.

Наконец, вы можете использовать другие методы передачи данных, такие как @Input или сервисы. Но директива ngModel и события (event binding) - самые распространенные и простые способы передачи данных между .html и .ts файлами в Angular.