Ionic 4 - Component within page/calling functions between them

@littlefloralbunny wrote:

Hello all!

I’m wondering what is the best solution to deal with this problem or if there is an alternative/best practise way to go about this.

I have a page which contains a custom component that is a simple input form (I want to use this form elsewhere as well, so it is a separate component). The page itself has a header with a back button and a save button for the form.

Example:

Page HTML

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="back()"
        ></ion-button>
    </ion-buttons>
    <ion-title>Page</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="save()"
        ></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
    <app-form></app-form>
</ion-content>

Form HTML

<form [formGroup]="form">
    <ion-input formControlName="name"></ion-input>
    <ion-input formControlName="age"></ion-input>
</form>

So I would want to save the values in the form component when the save button on the page is clicked. I have tried the following solution:

In form component .ts

  compileInput() {
    let person = {
      name: this.form.controls.name.value,
      age: this.form.controls.age.value,
    };
    console.log(person);  /// <--- this prints person with blank values?
    return person;
  }

And in my page .ts

 constructor(
    private router: Router,
    private service: Service,
    private form: FormComponent
  ) {}

  ngOnInit() {}

  public home() {
    this.router.navigateByUrl("home");
  }

  public save() {
    this.service.save(this.form.compileInput());
    this.home();
  }

What is a good way to deal with this?

Thankyou in advance

Posts: 1

Participants: 1

Read full topic