Как передать данные TD формы (или саму форму) из дочернего компонента в родительский?

Question

[Алёна Хреновская]

Есть родительский компонент с кнопкой "Отправить" и есть дочерний компонент с формой (template driven forms).
Ну и вопрос: как отправить саму форму или form.value из дочернего компонента в родительский?
П.С. а нужно это для дальнейшего формирования модели и отправки ее в БД.

Answer 1

[Антон Швец]

родитель

<app-child #appChild (submit)="onSubmit($event)"></app-child>
<button (click)="goMessage()">send</button>

@ViewChild('appChild') appChild: ChildComponent;

/** вызов метода потомка */
goMessage() {
  this.appChild.send('hello from parent');
}

/** реакция на событие из потомка */
onSubmit(event) {
  // проверка данных, заполнение полей, whatever
}

потомок ChildComponent

@Output() submit = new EventEmitter<string>();

/** отправим полученную строку обратно наверх */
public send(message: string) {
  this.submit.emit(message);
}

Так же можно отправить "события" через обычный @Input props скормив ему новый объект или рандомное число, т.е. чтобы значение пропса отличалось от предыдущего. И ловить изменения сеттером или в ngOnChanges

Comments

[Алёна Хреновская]

Спасибо! Я сама сделала! Но вам в копилочку отправлю как решение)))

у меня дочерний компонент:

@Output() onChangedForm = new EventEmitter<any>();
@ViewChild('form') form: NgForm;

ngOnInit() {
this.form.valueChanges.subscribe( data => this.onChangedForm.emit(data));
  }

а родительский:

<child (onChangedForm)="onChangedForm($event)"></child>

form: any;

onChangedForm(some: any) {
    this.form = some;
  }

[Антон Швец]

Алёна Хреновская,
1. в данном случае вы формируете новый объект с данными формами и отправляете его в событие при каждом изменении формы. Тут нужно определить для себя нужно это или нет, и вообще в какие моменты мы хотим получить данные.

2. @Output() onChangedForm = new EventEmitter<any>();
В стайлгайде Ангуляра не рекомендуют называть события начиная с on. С on обычно называются методы-обработчики событий. У вас хорошим и понятным названием будет @Output() formChanges

3. Данные формы лучше типизировать, создать интерфейс, описывающий какие данные получаем из формы

[Алёна Хреновская]

Антон, спасибо большое! Учту!