Как я могу вынести в Angular formControl в отдельный компонент чтобы он был виден в formGroup?

Для того чтобы вынести formControl в отдельный компонент и сделать его видимым в formGroup в Angular, вам необходимо выполнить несколько шагов.

1. Создайте новый компонент, который будет содержать ваш formControl. Для этого используйте команду Angular CLI следующим образом:

ng generate component FormControlComponent

Это создаст новый компонент и добавит его в вашу файловую структуру проекта.

2. Все, что вам нужно сделать в новом компоненте, это создать FormControl и добавить его в шаблон компонента. Например, вы можете создать форму ввода текста, используя FormControl следующим образом:

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

@Component({
  selector: 'app-form-control',
  template: `
    <input type="text" [formControl]="formControl">
  `,
})
export class FormControlComponent {
  formControl = new FormControl('');
}

Обратите внимание, что мы импортируем FormControl из модуля @angular/forms и создаем экземпляр FormControl в классе компонента.

3. Теперь вы можете использовать ваш новый компонент FormControlComponent в другом компоненте, который содержит formGroup. Для того чтобы сделать FormControl видимым в formGroup, вам необходимо использовать директиву FormControlName и привязать ее к свойству formControlName, которое соответствует имени вашего FormControl. Например, если вы хотите использовать ваш FormControlComponent в AppComponent, следующий код покажет, как это сделать:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="formGroup">
      <app-form-control formControlName="myControl"></app-form-control>
    </form>
  `,
})
export class AppComponent {
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      myControl: [''],
    });
  }
}

Обратите внимание, что мы добавили директиву FormControlName к элементу app-form-control и привязали ее к свойству formControlName, которое соответствует имени нашего FormControl.

Теперь, когда вы запустите ваше приложение, вы увидите, что ваш FormControlComponent отображается внутри formGroup и является видимым и доступным для пользователей.