Question

我在Ionic 2（Angular）中有以下表格：

<form [formGroup]="newEventForm">

      <ion-item>
        <ion-label floating>Title</ion-label>
        <ion-input formControlName="title" type="text"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Sport</ion-label>
        <ion-select formControlName="sport">
          <ion-option value="Running">Running</ion-option>
          <ion-option value="Football">Football</ion-option>
          <ion-option value="Yoga">Yoga</ion-option>
          <ion-option value="Golf">Golf</ion-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Début</ion-label>
        <ion-datetime displayFormat="DD MMM YYYY" formControlName="timeStarts"></ion-datetime>
      </ion-item>

      <ion-item>
        <ion-label>Où</ion-label>
        <ion-input [hidden]="!sport.valid" formControlName="location" type="text" (click)="presentNewLocationModal()"></ion-input>
      </ion-item>


      <button ion-button type="submit" [disabled]="!newEventForm.valid">Submit</button>

    </form>

我希望仅在选择运动时显示位置输入。

我尝试使用[hidden] =“！sport.valid”，但它不起作用......任何线索？

Answer 1

试试这个newEventForm.controls [＆＃39; sport＆＃39;]。有效

<ion-item [hidden]="!newEventForm.controls['sport'].valid">
        <ion-label>Où</ion-label>
        <ion-input  formControlName="location" type="text" (click)="presentNewLocationModal()"></ion-input>
      </ion-item>

仅在一个特定输入有效时显示输入

1 个答案: