@microf

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

Я задавал вопрос Как передать 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
  • Вопрос задан
  • 417 просмотров
Пригласить эксперта
Ответы на вопрос 1
@antoart
Web developer
Привет.
Буду опираться на твой же код.

Реализация данного интерфейса позволяет ангуляровской форме взаимодействовать с кастомным компонентом. В метод
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
      ]
      ],
      

    });
  }

}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы