использовать formControlName для настраиваемого компонента ввода в реактивной форме

ШАГИ

1. Добавьте поставщика для NG_VALUE_ACCESSOR в декоратор

2. Реализуйте ControlValueAccessor в классе

3. Создайте функцию onChange следующим образом: onChange = (value: boolean) = ›{};

4. Добавьте методы registerOnChange, writeValue и registerOnTouched интерфейса ControlValueAccessor

5. В методе, в котором будет изменено значение select, вызовите функцию onChange, передав в качестве параметра значение select.

    import ...
    import { Component, forwardRef } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   
   
    @Component({
        moduleId: module.id.toString(),
        selector: 'custom-select',
        templateUrl: 'custom-select.component.html',
        styleUrls: ['custom-select.component.css'],
        // STEP 1
        providers: [{
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => CustomSelectComponent)
        }]
    })
    // STEP 2
    export class CustomSelectComponent implements ControlValueAccessor {
        // STEP 3
        onChange = (value: SelectModel) => {};
        @Input() public items: SelectModel[];
        public model: SelectModel;
        constructor(private customSelectService: CustomSelectService) {
            this.customSelectService.Selected.subscribe((data: SelectModel) => {
                this.model = data;
            });
        }
        public newSelect(select: SelectModel): void {
            // STEP 5
            this.onChange(select);
            this.customSelectService.updateSelected(select);
        }
        // STEP 4
        registerOnChange(fn: (value: SelectModel) => void): void {
            this.onChange = fn;
        }
        writeValue() {}
        registerOnTouched(){}
    }
   

Не забудьте добавить formControlName в селектор.

Добавьте это к поставщикам ребенка:

viewProviders: [{
  provide: ControlContainer, 
  useExisting: FormGroupDirective 
}]

Причина, по которой он терпит неудачу, в первую очередь заключается в том, что он не смотрит в родительскую область для FormGroup, поэтому он просто передает его дочернему элементу.

Затем вам нужно заставить его думать, что у вашего элемента управления есть valueAccessor, который ему не нужен, потому что вы только что создали своего рода «прокладку».

export const NOOP_VALUE_ACCESSOR: ControlValueAccessor = 
{
    writeValue(): void {},
    registerOnChange(): void {},
    registerOnTouched(): void {}
};

Затем в конструкторе для вашего ребенка:

constructor(@Self() @Optional() public ngControl: NgControl) 
{
    if (this.ngControl)
    {
        this.ngControl.valueAccessor = NOOP_VALUE_ACCESSOR;
    }
}

Затем вы можете использовать formControlName как обычно внутри дочернего элемента.

Если вам нужно передать formControlName из родительского компонента (что вы, вероятно, сделали бы, если бы он задумывался как многоразовый элемент управления), просто создайте свойство string @Input и сделайте это в дочернем:

    <input matInput [placeholder]="desc" 
           [formControlName]="formControlName">