Popup input

Ionic Framework ionic-v3
1

how to create form popup like this when user click on button ?

09%20PM

1 Like
2

as in the ionic alert controller documentation page you can have inputs in your alert like this

import { AlertController } from 'ionic-angular';

constructor(private alertCtrl: AlertController) {

}

presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

you can read more about ionic alerts here

2 Likes
3

thank you for reply amin
can i use Component html by creating in ts file for example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

i mean that for styling

4

yes you can use any html you want in your component.
but if you are concerned about the styling, don’t be! :slightly_smiling_face:
you can give a class to your alert and style all its elements using that class. for example:

let edit_alert = this.alertCtrl.create({
			message: 'ویرایش تگ',
			cssClass:'prompt_alert',
			inputs: [
				{
					name: 'tag',
					value: this.user_tags[index].Name
				}
			],
			buttons: [
				{
                   .
                   .
                   .

and style your alert elements for example like this:

.prompt_alert .alert-message{
	text-align: right;
}
.prompt_alert .alert-input{
	border-bottom: none!important;
    caret-color: #F58282;
}
.prompt_alert .alert-input-group:before {
    content: '#';
    display: inline-block;
    float: right;
    line-height: 3.5;
    color: black;
}
.prompt_alert .alert-input-wrapper {
    display: flex;
    padding-right: 3px;
}

or any other styles you need

5 Likes
5

thank amin … you are the best xD

1 Like
6

i want one little help … i’m new with ionic and angular :slight_smile:
how to make the filtering functionality with api … i mean i work with api’s and when user click filter button response with the result that matched with inputs

7

are you able to send data to your api from ionic and get the response (putting the dynamic values from inputs aside)?

8

no Unfortunately …
updates …
i have under understand your comment and did it
thank you for help

9

how to implement instead of inputs i want my pop-up has dropdown selector please reply me asap sir and thank you for your future answers

10

hi sir, how about adding a drop down selection below of the inputs?

11

You should use radio in alert, drop down is not supported.

Or, you can use modal and create form item manually.

1 Like
12

i hate to see this… but thank you sir have a great day.