How to read value from form(for update information)

image

Untitlpled
html

<form [formGroup]="authForm" (ngSubmit)="submitForm(authForm.value)" >
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item">  <!--[(ngModel)]="email" [ngModelOptions]="{standalone: true}"-->
			<ion-input mode="ios" type="text" value="{{owner_list.email}}"  [formControl]="authForm.controls['email']"  placeholder="Email ID *" ></ion-input>
		</ion-item>
		<div class="error-box" *ngIf="emailRequired">* Email ID is required!</div>
		<div class="error-box" *ngIf="emailValid">* Valid Email ID is required!</div>
	</ion-list>
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item"> 
			<ion-input mode="ios" type="text" value="{{owner_list.cell}}" [formControl]="authForm.controls['mobile']"   placeholder="Mobile (Multiple If need) *" ></ion-input>
		</ion-item>
		<div class="error-box" *ngIf="mobileRequired">* Mobile is required!</div>
		<div class="error-box" *ngIf="mobileValid">Mobile is invalid. Space is not allowed</div>
	</ion-list>
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item">
			<ion-label class="ion-label">Thana *</ion-label>
			<ion-select class="ion-select dual-left-ion-select"  mode="md" [formControl]="authForm.controls['thana']"  (ionChange)="openArea($event)"> 
				<ion-option  value="{{thana_list.id}}" [selected]="thana_list.id == owner_list.thana" *ngFor="let thana_list of thanaData">{{thana_list.name}}</ion-option>
			</ion-select>
		</ion-item>
		<div class="error-box" *ngIf="thanaRequired">* Thana is required!</div>
	</ion-list>
	<button mode="md" type="submit" button-md ion-button full tappable  >Submit</button>
</form>

ts

constructor(
		 
		public fb: FormBuilder, 
		private thana: Thana,
	){
	this.authForm = fb.group({
		'thana' : [null, Validators.compose([Validators.required])],
		'mobile' : [null, Validators.compose([Validators.required, Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$') ])],
		'email' : [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ])]
	});
}
submitForm(value: any):void{
	console.log(value.email);
	console.log(value.mobile);
	console.log(value.thana);
}

problem

when i submit form then i am finding null value from email,mobile and thana. probably i am missing something or my process is wrong.
please help any one. thanks in advanced.

you have to use model binding, example:

<ion-input [(ngModel)]="username" type="text"></ion-input>

and then in .ts file you need a variable of that name so:

username: any;
1 Like

i am finding null value when i am opening this page and click submit.
if i change input value then i am finding exact value.
i am facing same problem for [(ngModel)]

Your formGroup looks fine, though I’d use empty string instead of null. Your submit function seems odd. You don’t need to pass values.

(submit)="submitForm($event)"
This is fine. Pass the event if you need it for any reason, like to close an ItemSliding.

<ion-input formControlName="email">

get email(): string {
    return this.nameOfForm.value['email'];
  }
submitForm(e: Event) {
  //this.email automatically has the email the user submitted
}
2 Likes

You don’t even need to pass $event, normally.

Yeah, it’s overkill, I agree. I use it in a form because of an animation, and was stuck in that rut. The OP doesn’t need it.

still i am finding null value because of below code:

this.authForm = fb.group({
		'thana' : [null, Validators.compose([Validators.required])],
		'mobile' : [null, Validators.compose([Validators.required, Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$') ])],
		'email' : [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ])]
	});

if i don’t use above code then error show
Error: formGroup expects a FormGroup instance. Please pass one in.
am i missing something?

I told you that your formGroup looks fine. I have no idea why you tried to delete it.

can you show me some code so that i can solve this problem.

As has already been said, remove all parameters from your submit handler.

I already did. Is my post not showing when you view the thread?

get email(): string {
		return this.authForm.value['email'];
	}
	get mobile(): string {
		return this.authForm.value['mobile'];
	}
	get thanaId(): string {
		return this.authForm.value['thanaId'];
	}
	submitForm() {
	  //this.email automatically has the email the user submitted
	  console.log(this.email);
	  console.log(this.thanaId);
	  console.log(this.mobile);
	}

i am using this.

What do your ion-inputs look like?

<form [formGroup]="authForm" (submit)="submitForm()" *ngFor="let owner_list of roomOwnerSingleData">
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item">  <!--[(ngModel)]="email" [ngModelOptions]="{standalone: true}"-->
			<ion-input mode="ios" type="text" value="{{owner_list.email}}"  formControlName="email"  placeholder="Email ID *" ></ion-input>
		</ion-item>
		<div class="error-box" *ngIf="emailRequired">* Email ID is required!</div>
		<div class="error-box" *ngIf="emailValid">* Valid Email ID is required!</div>
	</ion-list>
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item"> 
			<ion-input mode="ios" type="text" value="{{owner_list.cell}}" formControlName="mobile"   placeholder="Mobile (Multiple If need) *" ></ion-input>
		</ion-item>
		<div class="error-box" *ngIf="mobileRequired">* Mobile is required!</div>
		<div class="error-box" *ngIf="mobileValid">Mobile is invalid. Space is not allowed</div>
	</ion-list>
	<ion-list mode="md" class="ion-list-margin-bottom">
		<ion-item class="input-ion-item">
			<ion-label class="ion-label">Thana *</ion-label>
			<ion-select class="ion-select dual-left-ion-select"  mode="md" formControlName="thanaId"  (ionChange)="openArea($event)"> 
				<ion-option  value="{{thana_list.id}}" [selected]="thana_list.id == owner_list.thana" *ngFor="let thana_list of thanaData">{{thana_list.name}}</ion-option>
			</ion-select>
		</ion-item>
		<div class="error-box" *ngIf="thanaRequired">* Thana is required!</div>
	</ion-list>
	<button mode="md" type="submit" button-md ion-button full tappable  >Submit</button>
</form>

am i missing in this code something?

Stylistically, I would much prefer formControlName="email" over [formControl]="authForm.controls['email']".

What happens when you submit?

constructor(
		 
		public fb: FormBuilder, 
		private thana: Thana,
	){
this.loadRoomOwnerSingle();
	this.authForm = fb.group({
		'thanaId' : [null, Validators.compose([Validators.required])],
		'mobile' : [null, Validators.compose([Validators.required, Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$') ])],
		'email' : [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$') ])]
	});
}
get email(): string {
		return this.authForm.value['email'];
	}
	get mobile(): string {
		return this.authForm.value['mobile'];
	}
	get thanaId(): string {
		return this.authForm.value['thanaId'];
	}
	submitForm() {
	  //this.email automatically has the email the user submitted
	  console.log(this.email);
	  console.log(this.thanaId);
	  console.log(this.mobile);
	}

i am geetting null value.

Well you’re setting your inputs with null values, which isn’t what I suggested. I’m not sure what else I can tell you.

you are telling me i am setting input fields with null value but form display is show below image:

Untitlpled

You literally just posted code that included nulls in your formGroup. Also, you changed your html so now you’ve got an ngFor in your form statement. It’s fine if you don’t want to do what I recommend, but it means you’re better off talking to somebody else.

1 Like