Как реализовать ControlValueAccessor?

Question

[microf]

Я задавал вопрос Как передать FormControlName в компонент и мне там дал ответ уважаемый denismaster, что надо реализовать ControlValueAccessor и да. Я почитал про него и да, мне очень стыдно, но я ни хрена не понял как через него перекидывать параметры в компоненту
Stackblitz

<form [formGroup]="SignupReactiveForm">
        <div class="form-group">
            <app-input  label="email" type="email" formControlName="email">
</app-input></div>
</form>

В SignupComponent я реализовал форму, куда подключаю собственный компонент

<app-input  label="email" type="email" formControlName="email">

Окей, в компоненте InputComponent я подключаю ControlValueAccessor, реализую как то этот интерфейс

writeValue(value: any) {
   this.formControlName = value;
  }
  registerOnChange() { }
  registerOnTouched() { }

, регистрирую его

{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }

и как дальше то? Как я получаю в writeValue значение formControlName и как мне его вывести???
Stackblitz

Comments

[Владимир]

https://alligator.io/angular/custom-form-control/

Answer 1

[Артур]

Привет.
Буду опираться на твой же код.

Реализация данного интерфейса позволяет ангуляровской форме взаимодействовать с кастомным компонентом. В метод

writeValue(value: any) {
   this.formControlName = value;
  }

прокидывается то значение, которое ты передаешь в formControlName. Заметь, это не Binding, как между компонентами. Чтобы значение передалось надо сказать форме прямо и конкретно

form.setValue({email: "email", password: 'passworddd'})
// или 
form.patchValue({email: "email"})

А чтобы динамически считать значение, которое ты прокинешь через функцию this.propagateChange(val) , надо уже работать с изменением формы

this.filterForm.valueChanges
      .pipe(
        takeUntil(this._onDestroy$)
      )
      .subscribe((val) => {
       console.log(val);
      });

И ты пойми что же ты хочешь. Прокидывать параметры в компонент (binding) или прокидывать значение формы в компонент (ControlValueAccessor).

p.s. напиши в своем коде, и посмотри как в консоль валятся значения формы из уже дочернего компонента.

initForm() {
    this.SignupReactiveForm = this.fb.group({
      password: ['password', [
        Validators.required,
        Validators.pattern(/[A-z]/)
      ]
      ],
      email: ['email', [
        Validators.required, Validators.email
      ]
      ],
      

    });
  }

}