Question

我是ionic的新手，为我要完成的未完成应用程序继承了代码库。当前表单使用标准HTML标签代替表单离子标签（例如，输入而不是离子输入）。下面是我为新表单构建的一些标准HTML，但是输入在浏览器中以0宽度和0高度呈现，因此实际上是不可编辑的。我在犯一个常见错误吗？ scss中是否需要设置某些内容？ TIA。

<ion-view view-title="Add Card">
  <ion-content>
    <form>
      <div class="list">
      <ion-item>
        <ion-label fixed>Card Number</ion-label>
        <ion-input type="text" name="cardNumber" placeholder="#### #### #### ####"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Exp. Date</ion-label>
        <ion-input type="text" name="expDate" placeholder="MM/YY"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label fixed>CVV</ion-label>
        <ion-input type="text" name="cvv" placeholder="MM/YY"></ion-input>
      </ion-item>
    </div>
    <button ion-button type="submit" block>Save Card</button>
  </form>
  </ion-content>
</ion-view>

Answer 1

无需使用ion-view

Example

HTML”

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

<ion-content>
    <form [formGroup]="form" (ngSubmit)="callSubmit()">
        <div class="list">
            <ion-item>
                <ion-label fixed>Card Number</ion-label>
                <ion-input type="text" formControlName="cardNumber" placeholder="#### #### #### ####"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label fixed>Exp. Date</ion-label>
                <ion-input type="text" formControlName="expDate" placeholder="MM/YY"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label fixed>CVV</ion-label>
                <ion-input type="text" formControlName="cvv" placeholder="MM/YY"></ion-input>
            </ion-item>
        </div>
        <button ion-button type="submit" block>Save Card</button>
    </form>
</ion-content>

TS：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  form: FormGroup;

  constructor(public navCtrl: NavController, private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      cardNumber: null,
      expDate: null,
      cvv: null
    })
  }

  callSubmit() {
    console.log(this.form.value);
  }

}

离子输入元素的宽度，高度为零

1 个答案: