Angular2: [(ngModel)] mit ion-select - zeige div je nach gewähltem Wert

Question

Ich arbeite mit ionic2 und angular2 mit Javascript (nicht Typoskript) Ich habe 2 Eingaben: Text und wählen. Ich möchte den Eingabetext ausblenden, wenn select.val() == 'more'. Wie mache ich das?

Dies ist der Code, den ich habe:

 <ion-item class="sq-p-input-price" *ngIf="typePriceMore()"> 
      <ion-label for="price" class="sr-only">Price</ion-label> 
      <ion-input id="price" type="number" value="" placeholder="Price" required></ion-input> 
     </ion-item> 

     <ion-item class="sq-p-input-type"> 
      <ion-label class="sr-only" for="type">Tipo</ion-label> 
      <ion-select [(ngModel)]="priceTypeModel" id="type" required> 
       <ion-option *ngFor="#option of priceType" value="{{option.value}}">{{option.key}}</ion-option> 
      </ion-select> 
     </ion-item> 

Das Array auf #Option ist:

this.priceType = [ 
     { 
      key: 'fixo', 
      value: 'fix' 
     }, 
     { 
      key: '/hora', 
      value: 'hourly' 
     }, 
     { 
      key: 'Preciso mais informação', 
      value: 'more' 
     }, 
    ] 

Daneben gibt es 2 denkt mehr ich schwierig bin mit zu erreichen:

1 - Legen Sie einen Anfangswert für die Auswahl fest. Die Verwendung von "selected" funktioniert nicht, da ich beim Laden der Seite immer leer bin.

2 - Wenn der input.text (Preis) ausgeblendet ist, entfernen Sie das Attribut "required".

Thanks :)

Answer 1

Um einen Anfangswert auf einem ngModel gesetzt, sollten Sie es in ein Element gibt es zwei Möglichkeiten zu verbergen

constructor(){ 
    priceTypeModel = 'more'; 
} 

---

definieren constructor()

1. [hidden] attribut e (wenn true setzt display:none auf das Element, bleibt in DOM)

<ion-item class="sq-p-input-price" [hidden]="priceTypeModel === 'more'"> 

    <ion-label for="price" class="sr-only">Price</ion-label> 
    <ion-input id="price" type="number" value="" placeholder="Price"></ion-input> 
</ion-item> 

2. *ngIf Richtlinie (wenn false entfernt Element aus der DOM)

<ion-item class="sq-p-input-price" *ngIf="priceTypeModel !== 'more'"> 

    <ion-label for="price" class="sr-only">Price</ion-label> 
    <ion-input id="price" type="number" value="" placeholder="Price"></ion-input> 
</ion-item> 

---

Sie *ngIf im Fall unten verwenden soll, die das Element von DOM entfernt, so dass nicht mehr required Validierung

2 - Wenn der input.text (Preis) versteckt ist, das Attribut zu entfernen "erforderlich".