Can not get form value from html

Ionic Framework ionic-v3
1

I tried to use a form to validate my inputs, I got it working for my signup page but in edit profile page I just can’t get the form value from HTML page. I can’t figure out why since the same code worked on another page.

  <form [formGroup] = "editProfileForm" novalidate>
    <ion-item>
      <ion-input type="text" placeholder = "First Name"   fromControlName = "firstName"></ion-input>
      <ion-input type="text" placeholder = "Last name" fromControlName = "lastName"></ion-input>
      <ion-icon name="person" item-start></ion-icon>
    </ion-item>
    <ion-col>
      <button ion-button class="update-button" (click)="update(editProfileForm.value)" >Save</button>
    </ion-col>
  </form>

constructor(
    private AFcurUser: AngularFireAuth,
    private AFdatabase: AngularFireDatabase,
    public loadingCtrl: LoadingController,
    public alertCtrl: AlertController,
    public app: App,
    public navCtrl: NavController,
    public firebaseModule : FirebaseProvider,
    public formBuilder : FormBuilder)
  {

    this.editProfileForm = formBuilder.group({
      email : ['',Validators.required],
      lastName : ['',Validators.required],
      firstName :  ['',Validators.required],
      phone : ['',Validators.required,],
      Introduction : ['',Validators.required,],
      travelRadius : ['',Validators.required,],
    });
}

  update = function()
  {
       console.log(this.editProfileForm.value);   //this display the pre configure value in constructor always.
}
2 
<form [formGroup]="medlistForm" (ngSubmit)="onSubmit()">
...
<button ion-button type="submit">Submit</button>
</form>
3

tried that, still not working

4

I do forms differently

import { FormControl, FormGroup, Validators} from "@angular/forms";

export class MedlistFormPage implements OnInit {
  medlistForm: FormGroup;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
  }

  ngOnInit() {
    this.initializeForm();
  }

  onSubmit() {
      const value = this.medlistForm.value;
      let newMedlist: MedList = {
        title: value.title,
        description: value.description,
        zipcode: value.zipcode,
        distance: value.distance,
        medications: this.medListMedications
      }

      //console.log(newMedlist);

     ...
  }



  private initializeForm() {
      this.medlistForm = new FormGroup({
        'title': new FormControl(null, Validators.required),
        'description': new FormControl(null),
        'zipcode': new FormControl(null),
        'distance': new FormControl(null)
      });

  }


}
5

I tried your way and still got the null value as initialization.

6

I would need to see your page.html and page.ts to help any further

7

nvm i found the problem. typed formControlName into fromControlName…