как использовать controlvalueaccessor для формы в угловых?

Question

в моем InstagramContentProductionComponent я хочу использовать форму, которую я создал ранее в InstagramPostTextFormComponent с использованием ControlValueAccessor.

Я сделал несколько кодов, но не могу получить доступ к моей форме.

вот мой instagram-content-production.component.html я написал ниже код:

<form [formGroup]="createPostForm">
    <div class="form-group">
        <app-post-text formControlName="text" (keyup)="test()"></app-post-text>
    </div>
</form>

и в instagram-content-production.component.ts я код:

public text = {};
createPostForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createPostForm = this.fb.group({
  text: fb.control({
    content: 'abc'
  }),
});
}

и это структура моего instagram-post-text-form.component.ts:

import {ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
import {Component, forwardRef, OnInit, Renderer2, ViewChild} from '@angular/core';

export const EPANDED_TEXTAREA_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InstagramPostTextFormComponent),
  multi: true,
};

@Component({
  selector: 'app-post-text',
  templateUrl: './instagram-post-text-form.html',
  styleUrls: ['./instagram-post-text-form.scss'],
  providers: [EPANDED_TEXTAREA_VALUE_ACCESSOR],
})

export class InstagramPostTextFormComponent implements OnInit,   ControlValueAccessor {

  form: FormGroup;
  @ViewChild('textarea') textarea;

  onChange: any = () => {
  };
  onTouched: () => void = () => {
  };


  constructor(private renderer: Renderer2) {
  }

  writeValue(value: any): void {
  }

  registerOnChange(fn): void {
    this.form.valueChanges.subscribe(() => {
      this.onChange = fn;
    });
  }


  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  change($event) {
    this.registerOnChange($event.target.textContent);
  }

  touch($event) {
    this.registerOnTouched($event.target.textContent);
  }

  ngOnInit() {
    this.form = new FormGroup({
      content: new FormControl(null, Validators.required),
    });
  }
}

и вот ее HTML код:

<div [formGroup]="form">
  <div #textarea contenteditable="true"
       class="text-box"
       ngDefaultControl  formControlName="content"
       placeholder="متن ..."
       (input)="change($event);touch($event)"
       maxlength="2300">
  </div>
</div>

, когда я набираю в этой форме textarea, не обновляется, и я получаю только начальное значение формы ('abc').

как я могу решить эту проблему?