How to Pass Form Group Data to Submit Button in Another Component (Angular 7)

Question

I'm having issues passing my form group data to the saveDialog() function which updates the form data on a submit button.

How would I do this in Angular 7? I'm trying to have all my components for each form group seperated, and submitted/updated together using one button?

modify-view-action.component.html

      <form [formGroup]="modifyActionForm" (ngSubmit)="saveDialog()">
    <div class="container" fxLayout="row" fxLayoutGap="25px">
      <div class="column1" fxLayout="column">
        <mat-form-field>
          <mat-label>Name</mat-label>
          <input matInput>
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Keyword</mat-label>
          <input matInput>
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input matInput>
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Icon</mat-label>
          <input matInput>
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Priority</mat-label>
          <input matInput>
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
      </div>
    </form>

modify-view-action.component.ts

export class ModifyViewActionComponent implements OnInit {
  modifyActionForm: FormGroup;
  dbrAction: any;


  constructor() { }

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.dbrAction = JSON.parse(localStorage.getItem('DbrAction'));
  }
}

Answer 1

First in order to get data from a FormGroup you need to add formControlName on each input you want data from. Like that :

 <mat-form-field>
      <mat-label>Name</mat-label>
      <input matInput formControlName="name">
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
 </mat-form-field>

You also need to declare in your .ts file, the FormGroup with each controllers. Like that :

modifyActionForm = new FormGroup({
  name : new FormControl(),
  keyword: new FormControl(),
  description: new FormControl(),
  // And that ⬆ for each input in your form
})

In order to get the data from this FormGroup you need to do this :

this.modifyActionForm.value

You will get an Object with your inputs' data.

Your question is not quite clear but if you want to pass data like for example your FormGroup from a component to another one, many techniques exist.

I recommend you to read this great article from Jeff Delaney explaining the different way to sharing Data between Angular Components (Fireship.io - Sharing Data between Angular Components) and this one Fireship.io - Angular Reactive Forms Basics Guide explaining how works reactive forms and how to use them.

Good day !