Как правильно обрабатывать форму с шаренными компонентами?

Question

[Ivan Stroykin]

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

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

<form #testForm="ngForm">
  <input type="text" name="test1" ngModel>
  <test-input></test-input>
  <test-select></test-select>
  <button (click)=test(testForm.value)>Test</button>
</form>

Как правильно будет брать значения из шаренных компонентов?

Answer 1

[Yuriy Berg]

Что значит шаренные компоненты?

<test-input></test-input>
  <test-select></test-select>

Если ты про них, то более правильно это называется (дочерние директивы) по отношению к тому в котором они вызываются.

Если ты хочешь передать в них значение тебе нужно использовать декотораторы, что бы принять эти значения.

<test-input [value]="data"></test-input>

import { Component, Input } from '@angular/core';
  
  @Component({
     selector: 'test-input'
  })

  export class TestInputComponent {
     // Тут значение принимается!
     // Тип значения должен стоять тот, который ожидается
    // @Input() - это то что называется декоратором, он служит для передачи значений между директивами
     @Input()
      value: any;
  }

Comments

[Ivan Stroykin]

Нужно не передать им, а получить из них)

[Yuriy Berg]

Если получить то в директиве пишешь (value)="methodEvent($event)"
И в директиве используешь декоратор.
@Output() value = new EventEmitter();

Вот тут смотри подробнее:
https://angular.io/docs/ts/latest/cookbook/compone...

[Yuriy Berg]

В компоненте*

[Ivan Stroykin]

Yuriy Berg: Спасибо большое за помощь. завтра попробую реализовать

[Ivan Stroykin]

Yuriy Berg: а вы, случаем, с плагином select2 не работали?

[Yuriy Berg]

Иван Стройкин: Не работал