Как создать реактивную форму в Ангуляр, используя dumb компоненты?

Question

[Саша Ящук]

Всем Hello!
Подскажите плиз, создаю компонент страничку логина, хочу использовать реактивные формы. Но у меня создан список тупых компонентов, которые я должен использовать. У меня есть компонент с формой:

<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>

в нем лежит глупый компонент инпута app-input, как мне передать в в него директиву formControlName, что бы форма понимала какой инпут за что отвечает?
app-input представляет из себя:
шаблон

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

контролер:

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...
и левел ап
https://blog.angularindepth.com/reducing-the-forms...

Comments

[Саша Ящук]

Спасибо! Буду ознакамливаться!