Угловой 8: formControlName внутри компонента, Альтернатива ControlValueAccessor с именем группы и т.д.?

Question

Был опубликован вопрос: Angular 2 - formControlName внутри компонента . Однако это был ответный комментарий от PMoloney ниже, который действительно заинтриговал меня. Было любопытно, если это ценно или будет работать? Автор PMaloney никогда не указывает, как его использовать, может ли кто-нибудь привести рабочий пример своей идеи? Я пытался выяснить это.

"Этот ответ немного устарел, у Angular теперь есть FormGroupName, который работает аналогично FormControlName, т.е. вместо переноса каждого ввода он просто добавляет указатель на FormGroup вТеория "

Оригинальный вопрос: " Я хочу создать пользовательский компонент ввода, который можно использовать с API FormBuilder. Как добавить formControlName внутри компонента?

<label class="custom-input__label"
          *ngIf="label">
        {{ label }}
</label>
<input class="custom-input__input" 
       placeholder="{{ placeholder }}"
       name="title" />
<span class="custom-input__message" 
      *ngIf="message">
        {{ message }}
</span>

Цель использования:

<custom-input label="Title" 
           formControlName="title" // Pass this to input inside the component>
</custom-input>

Ответ и особенно комментарий заинтриговали меня.

"Этот ответ немного устарел, Angular теперь имеет FormGroupNameкоторый работает аналогично FormControlName, то есть вместо переноса каждого ввода он просто добавляет теоретический указатель на FormGroup "

Ответ: https://stackoverflow.com/a/39696952." Основная идея здесьчто вам нужно связать FormControl с FormGroup, это можно сделать, передав FormGroup каждому входному компоненту ... Таким образом, ваш входной шаблон может выглядеть примерно так:

<div [formGroup]="form">
    <label *ngIf="label">{{ label }}</label>
    <input [formControlName]="inputName" />
    <span *ngIf="message">{{ message }}</span>
</div>

Где @ Input для компонента input будут form, label, inputName и message. Это будет использоваться так:

<form [FormGroup]="yourFormGroup">
    <custom-input
        [form]="yourFormGroup"
        [inputName]="thisFormControlName"
        [message]="yourMessage"
        [label]="yourLabel">
    </custom-input>
</form>

Answer 1

Для использования вашего собственного компонента, например FormControl, вы можете использовать интерфейс ControlValueAccessor guide