How to set value to this form fields for editing and display existing data?

Ionic Framework ionic-v3
1 


 this.form = this.fb.group({
      name:[],
      id: [],
      city: [],
      school: [],
      state: [] });

Using this form for saving data to sqlite. Now from the edit button i am redirecting on the same page. Now value received from database and passed through navParams so added few more lines

 this.form = this.fb.group({
       name:[],
       id: [],
       city: [],
       school: [],
       state: [] });
 
 
 this.details = this.navParams.get('Details'); 
 
 if this.navParams.get('editing'==true){
   this.Form.setValue({
   name:this.details.name,
   id: this.details.id,
   city: this.details.city,
   school: this.details.school,
  state: this.details.state 
   });
 }

How to assign existing value to form only if editing is true other wise work as normal blank form??

2

@sedar
Please try this it may help you

this.details = this.navParams.get('Details'); 

if this.navParams.get('editing'==true){
 this.form = this.fb.group({
     name:[this.details.name],
       id: [this.details.id],
       city: [this.details.city],
       school: [this.details.school],
       state: [this.details.state] 
   });
 }
3

How variables are bounded with form ?? its not working

Constructor (...){ 

  this.form = this.fb.group({
    name:[],
       id: [],
       city: [],
       school: [],
       state: [] });
})
if this.navParams.get('editing'==true){
     name:[this.details.name],
       id: [this.details.id],
       city: [this.details.city],
       school: [this.details.school],
       state: [this.details.state] 
   });
}
4

@sedar will u please console the form.value?

if this.navParams.get('editing'==true){
 this.form = this.fb.group({
     name:[this.details.name],
       id: [this.details.id],
       city: [this.details.city],
       school: [this.details.school],
       state: [this.details.state] 
   });
 }
5 
console.log('value--',this.form.value);

this is printing only [object , object]

6

@sedar

 this.details = this.navParams.get('Details'); 
need to know the value of this.details too.
7

@vibinflogesoft

could you print here your form of HTML code

thanks

8 
   <ion-row>
            <ion-item col-6>
              <ion-label inline> Floor No</ion-label>
              <ion-input type="number" min="0" formControlName="ml_floor" required clearInput></ion-input>
            </ion-item>
            <ion-item col-6>
              <ion-label inline>Room No</ion-label>
              <ion-input type="number" min="0" formControlName="ml_room_no" required clearInput></ion-input>
            </ion-item>
          </ion-row>

          <ion-row>
            <ion-item col-6>
              <ion-label inline>Room Type</ion-label>
              <ion-select type="text" formControlName="ml_unit" required clearInput>
                <ion-option *ngFor="let room of room_type" let i=i ndex [value]="room.code">{{room.room_type}}</ion-option>
              </ion-select>
            </ion-item>

            <ion-item col-6>
              <ion-label inline> Wall Number</ion-label>
              <ion-input type="number" min="0" formControlName="ml_wall_no" required clearInput></ion-input>
            </ion-item>
          </ion-row>

And this is form group

 this.form = this.fb.group({
 ml_floor: [],
      ml_unit: [this.lineDetails[0].lsl_sys_id||''],
      ml_room_no: [],
      ml_wall_no: [],
})
9

@sedar

Could you try [(ngModel)]="" your form

thanks

10

what exactly i have to do? i am using form bcse there are many input fields

11

@sedar

Yes you need to add [(ngModel)] in each input field

12

No i cant use it , its giving error. Is it possible to use formGroup and [(ngModel)] same time??

13

yes you can use formGroup and [(ngModel)] same time

14

but its giving error , Can you give and example how to assign value on same form when edit == true

15

Hi, @sedar

In View file

<form [formGroup]="authForm">
<ion-item>
    <ion-label><ion-icon ios="ios-person" md="md-person"></ion-icon></ion-label>
    <ion-input id="username" type="text"   [formControl]="username" placeholder="Username" name="username" [(ngModel)]="newuser.username"></ion-input>
</ion-item>
<ion-item>
   <ion-label><ion-icon ios="ios-mail" md="md-mail"></ion-icon></ion-label>
  <ion-input id="email" type="email" [formControl]="email" placeholder="Email" name="email" [(ngModel)]="newuser.email"></ion-input>
 </ion-item>
  <button ion-button full round outline color="dark" (click)="doSignup()"  [disabled]="!authForm.valid" >Sign Up</button>
</form>

in your .ts file

import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

export class RagisterPage {
  newuser = {email:'',username:''}
  editdata;
  email:AbstractControl;
  username:AbstractControl;

authForm : FormGroup;
  constructor(public navCtrl: NavController, public navParams: NavParams,public fb: FormBuilder) {
  this.authForm = this.fb.group({
      'username' : [null, Validators.compose([Validators.required])],
      'email': [null, Validators.compose([Validators.required])],
}];
  this.username = this.authForm.controls['username'];
    this.email = this.authForm.controls['email'];
//when you edit data try code like below
this.editdata = his.navParams.get('Details');
if(this.navParams.get('Details')){
 this.newuser.email= this.editdata.email
this.newuser.username= this.editdata.username
}

}
doSignup(){
//here is your submit data 
   let allData  = this.newuser;
}
}

thanks