Is this a good practice for login form?


#1

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?


#2

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:


#3

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.