Вызов значений формы из другого компонента

Question

Я хочу вызвать значения формы, которую я заполнил в другом компоненте, но он дает мне нулевые значения.

Это компонент 1, который содержит форму:

export class LineChartComponent implements OnInit {
 lchartForm = this.fb.group({
 nb_columns: [],
 product_ID: [],
 indicator: [],
 startDate: [],
 endDate: [],

});
OnValidate() { 
this.router.navigate(['/Draw_Linechart']) }
OnSubmit() {..}

В component1 html:

<button mat-raised-button color="primary" class="btn btn-success btn-lg btn-block" type="submit" 
  (click)= "OnSubmit();OnValidate()" [mat-dialog-close]="true">Submit</button>

А это компонент 2:

export class DrawLinechartComponent implements OnInit {
 constructor(private linechartComponent: LineChartComponent) { }

ngOnInit() {
 this.getProducts();}
getProducts() {
console.log("from the other component",this.linechartComponent.lchartForm.value)}
}   

Выдает мне в консоли:

{nb_columns: null, product_ID: null, indicator: null, startDate: null, endDate: null}

Может кто знает как чтобы исправить это ?

Answer 1

Вам необходимо объявить LineChartComponent в качестве поставщика в вашем файле app.module.ts

providers:[LineChartComponent]

Также вам необходимо добавить для каждого поля вашего FormBuilder в component1. html

<form [formGroup]="lchartForm" (ngSubmit)="OnSubmit()">
  <h3>LChart Form
</h3>

<label>
  NB_Columns:
  <input type="text" formControlName="nb_columns">
</label> 

И так далее для всех полей

Answer 2

Что вам нужно, так это связь между компонентами. Есть несколько способов сделать это . Чаще всего используется сервисы.

Пример

Создание сервиса:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  lchartForm: any; 
  constructor() { }
}

Добавьте его как поставщика в модуль:

@NgModule({
  imports: [
    routing
  ],
  declarations: [
    LineChartComponent,
    DrawLinechartComponent
  ],
  providers: [
    DataService
  ]
})
export class AppModule { }

Внедрите его в свои компоненты и установите / получите данные из этой службы

export class LineChartComponent implements OnInit {
 constructor(private dataService: DataService) {
 }
 OnValidate() { 
   // set data into data service variable
   this.dataService.lchartForm = this.lchartForm;
   this.router.navigate(['/Draw_Linechart']) 
  }
}

Получите данные из службы и используйте их:

export class DrawLinechartComponent implements OnInit {
 constructor(private linechartComponent: LineChartComponent, private dataService: DataService) { }

ngOnInit() {
 this.getProducts();
}

getProducts() {
 console.log("from the other component",this.dataService.lchartForm)}
}   

Сообщите нам, помогло ли это.

Answer 3

Вы не можете передавать данные между компонентами просто с помощью инъекции, вам нужно найти другой способ, например, с помощью служб или с помощью декораторов @Input ()