Is this a good practice for login form?

Hi, I would like to know if this is a good way to create a Login page. This is my code:

<ion-content>
    <form (ngSubmit)="login(conversationId.value, userId)">
        <ion-item>
            <ion-label floating>Conversations Id</ion-label>
            <ion-input type="text" #conversationId></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>User Id</ion-label>
            <ion-input type="text" #userId></ion-input>
        </ion-item>

        <div padding>
            <button block type="submit">join!</button>
        </div>
    </form>
</ion-content>

Here is my TypeScript:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoginService} from './login-service';

@Component({
  templateUrl: 'build/pages/login/login.html',
  providers: [LoginService]
})
export class LoginPage {
  constructor(private loginService: LoginService) {

  }

  public login(conversationId: string, userId: string) {
    this.loginService.login(conversationId, userId);
  }
}

This works but Chrome gives me the following warning:

*It looks like you’re using the old forms module. This will be opt-in in the next RC, and
will eventually be removed in favor of the new forms module. For more information, see:
https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

Can you give me your inputs of how you use it?

Your form works fine. However, as your form gets larger, you probably don’t want to manually pass every input field.

I’d check out this tutorial:

1 Like

Note that as of beta 10, Ionic doesn’t support the new forms module yet, so don’t be in a hurry to use it.

1 Like