Как передать выбранное значение из кастомного выпадающего списка дочернего компонента в formGroup?

Question

[Ivan Stroykin]

Доброго времени суток,

Есть форма внутри которой есть несколько разных шареных селекторов (компонентов). Понял как работать с дочерними компонентами привязывая их к FormGroup. Вот пример мини реализации: ссылка

Но суть в том, что у меня эти дочерние компоненты являются кастомными выпадающими списками (плагин select2). Кто может подсказать как можно передать значение FormGroup?

В самой директиве select2 вывожу значение:
@Output() onChange = new EventEmitter();

И просто используя: (onChange)="setSelect($event)" могу в методе setSelect() получить правильное выбранное значение

<select select2 class="select2" (onChange)="setSelect($event)" formControlName="test3">
...

А вот как передать значение formGroup пока не разобрался

Comments

[Николай]

Вы используете второй ангуляр, но в тегах указали первый. Не надо так

[Ivan Stroykin]

Николай: А нету теперь в тегах разделения. Теперь только один тег: "Angular". Не знаю зачем такую путаницу затеяли

[Николай]

Иван Стройкин: действительно, прошу прощения за мой сарказм х)

Answer 1

[Ivan Stroykin]

Может кому пригодится.

Решение

import { Component, Input } from "@angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";

@Component({
  selector: 'test-input',
  template: `<input type="text" [(ngModel)]="value" (blur)="onBlur()">`,
  providers: [{provide: NG_VALUE_ACCESSOR, useExisting:TestInputComponent, multi: true}],
})
export class TestInputComponent implements ControlValueAccessor {
  private innerValue: any = '';
  private onTouchedCallback: () => void = () => {};
  private onChangeCallback: (_: any) => void = () => {};

  get value(): any { return this.innerValue; };

  set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

  onBlur() { this.onTouchedCallback(); }

  writeValue(value: any) {
        if (value !== this.innerValue)
            this.innerValue = value;
    }

  registerOnChange(fn: any) { this.onChangeCallback = fn; }
  registerOnTouched(fn: any) { this.onTouchedCallback = fn; }

  // ... Другие любые действия которые нам нужны

}

Естественно вместо простого инпута делаем все что хотим, главное, чтобы значение для формы уходило с базовых компонентов формы вроде инпута, селекта и прочего
В последствии в форме используем так:

<form [formGroup]="form">
  <test-input  formControlName="test"></test-input>
</form>

Answer 2

[_ _]

blog.rangle.io/angular-2-ngmodel-and-custom-form-c...

Comments

[Ivan Stroykin]

Немного не то всё же. Получилось сделать, единственное - не знаю насколько верно. Есть директива "select2", в который есть @Output onChange = new EventEmetter(). К дочернем компоненте я забираю значение: ...и в методе setSelect передаю: this.customForm.value.test3 = event

[Ivan Stroykin]

Хотя...тогда при смене имени, придется править в двух местах, уже не есть гуд

[_ _]

Иван Стройкин: самый простой выход - посмотреть на код formControlName директивы, наверное, в исходниках

Answer 3

[Gorovalo]

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
...
})
export class ComponentName {
form: FormGroup;
  
constructor(
    private fb: FormBuilder
  ){
   this.form = this.fb.group({
    test3: [...]
});
}
}

setSelect(event) {
  this.form.controls['test3'].setValue(event);
}

Comments

[Ivan Stroykin]

А если таких кастомных селектов много? в каждом компоненте прописывать тоже не айс