FormGroup doen't work using angular and ionic-CodePudding

I'm trying this a long time now and can't figure out why it doen't work. I followed different tutorials and read the Ionic and Angular docs about this topic.

The FormGoup doesn't apply to my from in html. The values after the button press still stay the same and do not update.

The code in my Component:

export class CreateNoteComponent implements OnInit {

  noteForm = this.formBuilder.group({
    firstName: ['value'],
    lastName: ['value'],
    age: ['value'],
  });

  constructor( private router: Router, private dataService: DataService, private formBuilder: FormBuilder ) {
  }

  ngOnInit() {
  }

  goBack() {
    this.router.navigate(['./home']);
  }

  logForm() {
    console.log(this.noteForm.value);
  }
}

Code in HTML:

<ion-content [fullscreen]="true">
  <div >
    <h2> Create new Note</h2>
  </div>

  <div >
    <form [formGroup]="noteForm">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName="firstName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName="lastName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Age</ion-label>
        <ion-input formControlName="age" type="number"></ion-input>
      </ion-item>

      <ion-button type="button" (click)="logForm()" block>Add Todo</ion-button>
    </form>
  </div>
</ion-content>

Code in Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { CreateNoteComponent } from './create-note.component';

@NgModule({
  imports: [ CommonModule, IonicModule, FormsModule, ReactiveFormsModule ],
  declarations: [CreateNoteComponent],
  exports: [CreateNoteComponent]
})
export class CreateNoteComponentModule {}

CodePudding user response：

do you can use this.noteForm.getRawValue() instead this.noteForm.value?

CodePudding user response：

Try changing the structure of your HTML like so, this should explicitly trigger the form handling:

<ion-content [fullscreen]="true">
  <div >
    <h2> Create new Note</h2>
  </div>

  <div >
    <form [formGroup]="noteForm" (ngSubmit)="logForm()">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName="firstName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName="lastName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Age</ion-label>
        <ion-input formControlName="age" type="number"></ion-input>
      </ion-item>

      <ion-button type="submit">Add Todo</ion-button>
    </form>
  </div>
</ion-content>