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

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['sport'].有效

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

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

Show input only when one particular input is valid

angular

ionic2

angular2-formbuilder