How to use single page muliple ngForm?

Ionic Framework ionic-v3
1

Hi ,
I want to use multiple forms(ngForm) in single page. How to use ? For example
User.html

<form #loginForm="ngForm" novalidate>
		<ion-item>
				<ion-label stacked color="primary">Username</ion-label>
				<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
					required>
				</ion-input>
			</ion-item>
</form>

<form #registrationForm="ngForm" novalidate>
			<ion-item>
				<ion-label stacked color="primary">Username</ion-label>
				<ion-input [(ngModel)]="registration.username" 
name="username" type="text" #username="ngModel" spellcheck="false" 
autocapitalize="off"
					required>
				</ion-input>
			</ion-item>
</form>

I am using this two forms in single page but when i summit login form registration forms also getting value automatically. How to i fix this ? How to validate this two forms separately ?

2

Hi @periyasamy17,

Where is the submit button? As there is no submit button displaying in the given code.

3

HI
Thank you for your reply.

<button ion-button (click)="login(loginForm)" type="submit" block>Login</button>
<button ion-button (click)="register(registrationForm)" type="submit" block>Register</button>
4

Code for buttons are looking proper. Try to put the buttons inside the relative form tag.