CODEWITHSUNDEEP
angular
Pramod Kumar
Pramod Kumar

Reputation: 1

How to fill the form with angular 2 using dynamic data from child component?

I have the following DOM structure: The app component has 

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

And the form component has the following html snippet: 

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

Now for this child detail component app-form-detail, whenever there is a form submit it creates a detail. In every detail there is an edit button.

Its possible to send the data from app-form-component to app-form-detail component. Now I have to send the data to fill in the form when I click on edit button from child component.

Upvotes: 0

Views: 58

Answers (1)

Anusha_Mamidala
Anusha_Mamidala

Reputation: 397

Yes, it is possible. check out https://angular.io/guide/component-interaction for component interaction.

Make these changes it works..!!

In form.component.html

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

In form.component.ts

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

In form-detail.component.ts

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

Make desired changes in editedDetails method in form.component.ts for your expected result

Upvotes: 2

Related Questions