Блог

Главная - Вопросы по программированию - Как заполнить форму с помощью angular 2, используя динамические данные из дочернего компонента?

Как заполнить форму с помощью angular 2, используя динамические данные из дочернего компонента?

#angular

#angular

Вопрос:

У меня есть следующая структура DOM: Компонент приложения имеет 

 <app-form-component></app-form-component>

И компонент формы содержит следующий фрагмент html: 

 <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
......
</form>
<app-form-detail></app-form-detail>

Теперь для этого дочернего компонента detail app-form-detail всякий раз, когда отправляется форма, она создает detail. В каждой детали есть edit кнопка.

Можно отправлять данные из app-form-component в app-form-detail компонент. Теперь мне нужно отправить данные для заполнения формы, когда я нажимаю на кнопку редактирования из дочернего компонента.

Комментарии:

1. Я попробовал с помощью @Output event emitter, проблема здесь в том, что событие должно быть помещено внутри компонента формы как <app-form-component (formEvent)="eventData($event)"></app-form-component> которое не работает. Потому что это помещено в <app-component></app-component>

Ответ №1:

Да, это возможно. проверьте https://angular.io/guide/component-interaction для взаимодействия компонентов.

Внесите эти изменения, и это сработает ..!!

В form.component.html

 <app-form-detail [formEvent]="formEventSubject.asObservable(data)" (formEmitEvent)="editedDetails($event)"></app-form-detail>

В form.component.ts

 editedDetails(data){
    console.log(data)
  }

В форме-detail.component.ts

  @Output() formEmitEvent = new EventEmitter<any>();
  editForm(data) {
    this.formService.setData(data);
    this.formEmitEvent.emit(data)
  }

Внесите желаемые изменения в метод editedDetails в form.component.ts для получения ожидаемого результата