Answers for "ion input"

input ionic

<!-- Default Input -->
<ion-input></ion-input>

<!-- Input with value -->
<ion-input value="custom"></ion-input>

<!-- Input with placeholder -->
<ion-input placeholder="Enter Input"></ion-input>

<!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input>

<!-- Number type input -->
<ion-input type="number" value="333"></ion-input>

<!-- Disabled input -->
<ion-input value="Disabled" disabled></ion-input>

<!-- Readonly input -->
<ion-input value="Readonly" readonly></ion-input>

<!-- Inputs with labels -->
<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Fixed Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

ionic form example

// in component.ts
this.myForm = formBuilder.group({
    firstName: ['value'],
    lastName: ['value', *validation function goes here*],
    age: ['value', *validation function goes here*, *asynchronous validation function goes here*]
});

...

// in component.html
<form [formGroup]="myForm">
    <ion-input formControlName="firstName" type="text"></ion-input>
    <ion-input formControlName="lastName" type="text"></ion-input>
    <ion-input formControlName="age" type="number"></ion-input>
</form>

ionic input

<!-- Inputs with labels -->
<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Fixed Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

ion input password

<ion-input formControlName="password" type="password"></ion-input>

ion-input v-model

/**
 Ionic Vue 0.0.8-next prerelease adds support for v-model to all Ionic inputs.
 
 To try it out, run
 
 npm install @ionic/vue@next
*/
<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Form</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <form @submit.prevent="submitForm">
        <ion-list>
          <ion-item>
            <ion-label position="floating">Custom</ion-label>
            <IonInputVue v-model="user.custom" />
          </ion-item>
          <ion-item>
            <ion-label position="floating">Select</ion-label>
            <IonSelectVue v-model="user.pet">
              <ion-select-option value="cats">Cats</ion-select-option>
              <ion-select-option value="dogs">Dogs</ion-select-option>
            </IonSelectVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Date</ion-label>
            <IonDatetimeVue v-model="user.date" />
          </ion-item>
          <ion-item>
            <ion-label position="floating">Address</ion-label>
            <IonInputVue v-model="user.address"></IonInputVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Notes</ion-label>
            <IonTextareaVue v-model="user.notes"></IonTextareaVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Toggle</ion-label>
            <IonToggleVue v-model="user.isCool"></IonToggleVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Radio</ion-label>
            <IonRadioVue v-model="user.enabled" value="enabled"></IonRadioVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Checkbox</ion-label>
            <IonCheckboxVue v-model="user.large"></IonCheckboxVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Search</ion-label>
            <IonSearchbarVue v-model="user.query"></IonSearchbarVue>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Toggle</ion-label>
            <IonRangeVue min="-200" max="200" color="secondary" v-model="user.range">
              <ion-label slot="start">-200</ion-label>
              <ion-label slot="end">200</ion-label>
            </IonRangeVue>
          </ion-item>
        </ion-list>
        <ion-button expand="block" type="submit">Submit</ion-button>
      </form>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "myform",
  methods: {
    submitForm() {
      console.log('Submitting form', this.user);
    }
  },
  data() {
    return {
      user: {
        name: 'Max',
        address: 'Home',
        custom: 'This is custom',
        date: '',
        date2: '',
        range: 100,
        isCool: false,
        notes: 'Very legal, very cool',
        large: false,
        query: 'This is a query'
      }
    }
  }
};
</script>