How to validate inputs in edit forms?

Ionic Framework ionic-v3
1

I have a page and I can add and edit in the same page, but I can’t do the validation.

I want to know if I can edit and validate in the same page.

2

Can you give an example of what you want to do…I’m thinking you are looking for Forms Validation

3

I know how to validate, but I don’t know how to validate when editing a form!

this is my page.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, LoadingController } from 'ionic-angular';
import { Api } from '../../providers/api';
import { Toast } from '@ionic-native/toast';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Consumer } from '../consumer/consumer';


@IonicPage()
@Component({
  selector: 'page-addconsumer',
  templateUrl: 'addconsumer.html',
})
export class Addconsumer {

  addForm: FormGroup;
  loader: any;

  id: number;
  firstName: string;
  lastName: string;
  gender: string;
  birth: string;
  phone: number;
  email: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, private api: Api, private toastCtrl: ToastController, public formBuilder: FormBuilder, public loadingCtrl: LoadingController) {

    this.id = navParams.get('id');
    this.firstName = navParams.get("firstName");
    this.lastName = navParams.get("lastName");
    this.gender = navParams.get('gender');
    this.birth = navParams.get('birth');
    this.phone = navParams.get('phone');
    this.email = navParams.get('email');

    this.addForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.maxLength(5), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
      lastName: ['', Validators.required],
      gender: ['', Validators.required],
      birth: ['', Validators.required],
      phone: ['', Validators.required],
      email: ['', Validators.required]
    });
  }


  saveConsumer(id, firstName, lastName, gender, birth, phone, email) {
    // this.presentLoading();
    // console.log(id);
    if (this.id) {
      this.api.editConsumer(this.id, this.firstName, this.lastName, this.gender, this.birth, this.phone, this.email).subscribe(response => {
        //this.navCtrl.popTo(Consumer, response);
        this.navCtrl.push(Consumer, response);
      });
    } else {
      this.api.addConsumer(this.addForm.value["firstName"], this.lastName, this.gender, this.birth, this.phone, this.email).subscribe(response => {
        //this.navCtrl.popTo(Consumer, response);
        this.navCtrl.push(Consumer, response);
      });
    }
  }

}

and this the page.html :


  <ion-navbar>
    <ion-title>Add or Edit Consumer</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form (submit)="saveConsumer()" [formGroup]="addForm" > 
  <ion-list>
    <ion-item>
      <ion-label>Firstname</ion-label>
      <ion-input type="text"   formControlName="firstName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Lastname</ion-label>
      <ion-input type="text" formControlName="lastName" name="lastName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Gender</ion-label>
      <ion-select formControlName="gender" name="gender">
      <ion-option value="m">Male</ion-option>
      <ion-option value="f">Female</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Birth</ion-label>
      <ion-input type="date" formControlName="birth" name="birth"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Phone</ion-label>
      <ion-input type="tel" formControlName="phone" name="phone"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" formControlName="email" name="email"></ion-input>
    </ion-item>
  </ion-list>

  <button ion-button full type="submit">Save</button>
  </form>

</ion-content>
4

I usually set a flag ‘isNewConsumer = true’ on calling the AddConsumer page…in that way, I can configure the initial value in the constructor…also, you can create an interface (model) for the Consumer type

consumerModel: Consumer:

constructor(...) {

   this.addForm = formBuilder.group({
      firstName: ['', Validators.compose([Validators.maxLength(5), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
      lastName: ['', Validators.required],
      gender: ['', Validators.required],
      birth: ['', Validators.required],
      phone: ['', Validators.required],
      email: ['', Validators.required]
    });

    if(navParams.isNewConsumer) {
      this.consumerModel = {};
    else {
      this.consumerModel = navParams.editConsumer;
      this.addForm.setValue(this.consumerModel, {onlySelf: true});
    }
 
  }