Can not get form value from html


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-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>
      <button ion-button class="update-button" (click)="update(editProfileForm.value)" >Save</button>
    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 ={
      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.

<form [formGroup]="medlistForm" (ngSubmit)="onSubmit()">
<button ion-button type="submit">Submit</button>


tried that, still not working


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() {

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



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




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


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


nvm i found the problem. typed formControlName into fromControlName…