#ionic4
#ionic4
Вопрос:
В моем фреймворке 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>
Ответ №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>
Комментарии:
1. успешно скомпилировано, но не могу получить какую-либо форму: (
2. @simsingh Что вы имеете в виду? Разве вы не видите поля ввода? Можете ли вы уточнить
3. я не могу видеть поля ввода …. пожалуйста, проверьте мой код и скажите мне, где я делаю неправильно
4. @simsingh не может обнаружить ошибку в вашем коде. Я обновил свой ответ примером формы внутри ionic grid. Надеюсь, это поможет!