Блог

В моем фреймворке Ionic 4 я хочу отправлять форму, когда нажимаю на кнопку отправки.

Я хочу получить имя пользователя и пароль при нажатии на кнопку отправки.

 `enter code here`

this is my ts file in ionic4

import { Component } from '@angular/core';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
	username:string;
	password:string;
	
	constructor()
	{
	
	  }
	  
login() {
  console.log(this.username);
  console.log(this.password);
  
}
  
  }



html file in ionic4  

 <ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<form (ngSubmit)='login()'>
 <ion-item>
  <ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
  </ion-item>
  <ion-item>
  <ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
  </ion-item>
  <ion-button type="submit">Submit</ion-button>
</form>
</ion-content>  

HTML

Разместите форму в html с полем ввода имени пользователя и пароля. Мы свяжем переменные имени пользователя и пароля с помощью ngModel. При нажатии кнопки активируется функция login ().

 <form (ngSubmit)="login()">
  <ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
  <ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
  <ion-button type="submit">Submit</ion-button
</form>
  

TS

Объявите переменные имени пользователя и пароля и поместите здесь функцию входа с другой логикой.

 login() {
  console.log(this.username);
  console.log(this.password);
  // other logic
}
  

Редактировать

Пример ion-input внутри ion-grid

 <ion-content>
  <ion-grid>
    <ion-row>
     <ion-col size="12"> <!-- Control width of form in grid -->
       <form (ngSubmit)="login()">
         <ion-row>
           <ion-col size="12">
             <ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
           </ion-col>
           <ion-col size="12">
             <ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
           </ion-col>
           <ion-col size="12">
         <ion-button type="submit">Submit</ion-button
           </ion-col>
         </ion-row>
       </form>
     </ion-col>
   </ion-row>
 </ion-grid>