How to create a reactive form in Angular using dumb components?

Question

Angular

Hello everyone!
Please tell me, I am creating a login page component, I want to use reactive forms. But I have a list of dumb components that I have to use. I have a form component:

<form [formGroup]="loginForm" (ngSubmit)="loginUser()">
    <div>
        <label for="email">Email:</label>
        <app-input type="text" ></app-input>
    </div>
    <div>
        <label for="password">Password:</label>
        <app-input type="text" ></app-input>
    </div>
    <button type="submit">login</button>
</form>

it contains a stupid app-input input component, how can I pass the formControlName directive into it, so that the form understands which input is responsible for what?
app-input is:
template

<input
  type="text"
  [(ngModel)]="value"
  (input)="this.valueChange.emit(this.value)"
>

controller:

import {Component, EventEmitter, Input, Output} from '@angular/core';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent {
  @Input() value = '';
  @Output() valueChange = new EventEmitter<string>();
}

Answer 1

ControlValueAccessor
https://medium.com/@maks.zhitlov/custom-form-contr...
https://tyapk.ru/blog/post/angular-custom-form-fie...
and level up
https:/ /blog.angularindepth.com/reducing-the-forms...