如何使用简单的提交按钮在ionic4中提交用户名和密码

Question

在Ionic 4框架中，我想单击“提交”按钮来提交表单。

当我单击提交按钮时，我想获取用户名和密码。

<bean id="primaryAuthenticationHandler"
  class="org.jasig.cas.adaptors.jdbc.QueryDatabaseAuthenticationHandler"
  p:dataSource-ref="dataSource"
  p:passwordEncoder-ref="passwordEncoder"
  p:sql="select PASSWORD from SD_AD_DAT_LOGIN where ACCESS_NAME=?" />
<bean id="passwordEncoder"  class="org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder"/>

`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

Answer 1

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>