Form input and select value update

html

<ion-list mode="md" class="ion-list-margin-bottom">
	<ion-item class="input-ion-item">  
		<ion-input mode="ios" type="text" value="{{owner_list.email}}"  [formControl]="authForm.controls['email']" [ngClass]="{'error-border':!authForm.controls['email'].valid}" placeholder="Email ID *" ></ion-input>
	</ion-item>
	<div class="error-box" *ngIf="authForm.controls['email'].hasError('required') && authForm.controls['email'].touched">* Email ID is required!</div>
	<div *ngIf="authForm.controls['email'].hasError('pattern') && authForm.controls['email'].touched">Email is invalid.</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']" [ngClass]="{'error-border':!authForm.controls['thana'].valid}" (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="authForm.controls['thana'].hasError('required') && authForm.controls['thana'].touched">* Thana is required!</div>
</ion-list>

ts

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

when i submit form then email and ‘thana’ field value show ’ email:null ’ and ’ thana:null '
How will i update form value?
please any body help. Thanks in advanced.

Stylistically, you’re better off putting all the code in the ts file, and putting self-documenting variables in the template.


ngIf="formValidationError"

let formValidationError: boolean = // some long thing

That would make your template easier to debug.

I don’t see your use of either [formGroup] or (submit).