Ionic formBuild no value formControlName

Question

I have a problem. This is my code:

<ion-content>
  <form
    novalidate
    [formGroup]="clientForm"
    (ngSubmit)="saveClient()"
  >
    <ion-list>
      <ion-item >
        <ion-label position="stacked">Nombre </ion-label>
        <ion-input
          formControlName="client_name"
          placeholder="Nombre..."
        ></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Apellidos </ion-label>
        <ion-input
          formControlName="client_lastname"
          placeholder="Apellidos..."
        ></ion-input>
      </ion-item>
      
      <ion-item>
        <ion-label position="stacked">Teléfono </ion-label>
        <ion-input
          formControlName="client_phone"
          placeholder="Teléfono..."
          type="number"
        ></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Email *</ion-label>
        <ion-input
          formControlName="client_email"
          placeholder="Email"
          type="email"
        ></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Tipo de cliente</ion-label>
        <ion-select placeholder="Tipo de cliente" formControlName="acl_level">
          <ion-select-option value="1">Cliente</ion-select-option>
          <ion-select-option value="2">Colaborador</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

this is my function in component:

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalController } from '@ionic/angular';

import { Clients } from '../clients-service/clients.models';

@Component({
  selector: 'app-clients-form-modal',
  templateUrl: './clients-form-modal.component.html',
  styleUrls: ['./clients-form-modal.component.scss'],
})
export class ClientsFormModalComponent implements OnInit {

  @Input() client: Clients;
  @Input() action : string;

  clientForm: FormGroup;

  constructor( 
      private modalCtrl: ModalController,
      private formBuilder: FormBuilder) 
    { }

    ngOnInit() {
      this.generateForm();
    }
  
    dismissModal() {
      this.modalCtrl.dismiss();
    }
  
    saveClient() {
      console.log(this.clientForm.value)
      if (this.clientForm.valid) {
        this.modalCtrl.dismiss(this.clientForm.value);
      }
    }
  
    private generateForm() {

      this.clientForm = this.formBuilder.group({
        client_id: [''],
        client_name: ['2222',Validators.required],
        client_lastname: ['2222',Validators.required],
        client_email: ['2222@222.com',[Validators.required, Validators.email]],
        client_phone: ['222',Validators.required], 
        acl_level: ['22',Validators.required],          
      });

      console.log("value");
      console.log(this.clientForm.valid)
      console.log(this.clientForm.value)
    }

}

I load import { ReactiveFormsModule } from '@angular/forms'; in the module too.

But when I print the form, each input is empty and when I submit the form, the values to send are empty

console.log("value") and console.log(this.clientForm.valid) prints matches correctly.

Anyone can help me please? I don't understand, I created other form in other projects and never had this issue.

Answer 1

I have created a StackBlitz compatible with Ionic and Angular that may help working with this specific issue. Check it out here.

I made some changes to the naming conventions of your controls from snake_case to camelCase not sure if that had anything to do with it.

I have taken the ngSubmit() off of the template file and instead added a submit button and hooked it up to the submit function that you have. I have been told to refrain from using ngSubmit on reactive forms. I don't have the evidence to prove why you should or shouldn't though.

Lastly, I added and modified the variable access modifiers.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public clientForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.generateForm();
  }

  public saveClient() {
    console.log(this.clientForm.valid);
    if (this.clientForm.valid) {
      console.log(this.clientForm.value);
    }
  }

  public generateForm() {
    this.clientForm = this.formBuilder.group({
      clientId: [''],
      clientName: ['2222', Validators.required],
      clientLastName: ['2222', Validators.required],
      clientEmail: ['2222@222.com', [Validators.required, Validators.email]],
      clientPhone: ['222', Validators.required],
      aclLevel: ['22', Validators.required],
    });

    console.log('value');
    console.log(this.clientForm);
  }
}

<ion-app>
  <ion-content>
    <form [formGroup]="clientForm">
      <ion-list>
        <ion-item>
          <ion-label position="stacked">Nombre </ion-label>
          <ion-input
            formControlName="clientName"
            placeholder="Nombre..."
          ></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Apellidos </ion-label>
          <ion-input
            formControlName="clientLastName"
            placeholder="Apellidos..."
          ></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Teléfono </ion-label>
          <ion-input
            formControlName="clientPhone"
            placeholder="Teléfono..."
            type="number"
          ></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Email *</ion-label>
          <ion-input
            formControlName="clientEmail"
            placeholder="Email"
            type="email"
          ></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Tipo de cliente</ion-label>
          <ion-select placeholder="Tipo de cliente" formControlName="aclLevel">
            <ion-select-option value="1">Cliente</ion-select-option>
            <ion-select-option value="2">Colaborador</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </form>
    <ion-button (click)="saveClient()">Submit</ion-button>
  </ion-content>
</ion-app>

Hopefully this helps!