Ion select not working

Ionic Framework ionic-v3
1

I am trying to use ion select, but after I select one option and go to another select it forgets the first select. I have been researching online and can’t get it to work. For something so simple! Thanks in advance for any help or suggestions.

<ion-header>
  <ion-navbar color="dark">
    <ion-title>Register</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="login-content" padding>
  <div class="login-box">

    <form (ngSubmit)="register()" #registerForm="ngForm">
      <ion-row>
        <ion-col>
          <ion-list inset>
            <ion-item>
             <ion-input type="text" placeholder="Email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input>-->
            </ion-item>

            <ion-item>
              <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="registerCredentials.password" required></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="number" placeholder="What is your current weight?" name="weight" [(ngModel)]="registerCredentials.weight" required></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>What do you wish to achieve from training?</ion-label>
              <ion-select name="goalsOfTraining" [(ngModel)]="registerCredentials"  multiple="true">
                <ion-option id="one" value="gainMuscle">Gain Muscle</ion-option>
                <ion-option id ="two"value="loseWeight">Lose Weight</ion-option>
                <ion-option value="toneUp">Tone Up</ion-option>
                
                <ion-option value="gainStrength">Gain Strength</ion-option>
                <ion-option value="increaseFitness">Increase Fitness</ion-option>
                <ion-option value="noneOfTheAbove">None Of The Above</ion-option>

              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>Activity level? (Aside from the gym)</ion-label>
              <ion-select name="activityLevel" [(ngModel)]="registerCredentials">
                <ion-option value="veryActive">Very Active</ion-option>
                <ion-option value="active">Active</ion-option>
                <ion-option value="moderate">Moderate</ion-option>
                <ion-option value="notVeryActive">Not Very Active</ion-option>

              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>Current calorie breakdown?</ion-label>
              <ion-select name="currentCalorie" [(ngModel)]="registerCredentials">
                <ion-option value="HighpHighcLowf">High protein, High carbs, Low fat</ion-option>
                <ion-option value="HighpLowcHighf">High protein, Low carbs, High fat</ion-option>
                <ion-option value="LowpHighcHighf">High protein, Low carbs, High fat</ion-option>
                <ion-option value="moderatep">Moderate protein, Moderate carbs, Moderate fat</ion-option>
                <ion-option value="doNotKnow">Do not know</ion-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-input type="number" placeholder="Tome planned to train?" name="timeTraining" [(ngModel)]="registerCredentials.timeTraining" required></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="number" placeholder="Days a week planned to train?" name="daysTraining" [(ngModel)]="registerCredentials.daysTraining" required></ion-input>
            </ion-item>

            <ion-item>
              <ion-label>Current level of fitness?</ion-label>
              <ion-select name="currentLevelOfFitness" [(ngModel)]="registerCredentials">
                <ion-option value="high">High</ion-option>
                <ion-option value="medium">Medium</ion-option>
                <ion-option value="low">Low</ion-option>
                <ion-option value="none">None</ion-option>
              </ion-select>
            </ion-item>

            <ion-item>
              <ion-label>What is your gender?</ion-label>
              <ion-select name="gender" [(ngModel)]="registerCredentials">
                <ion-option value="male">Male</ion-option>
                <ion-option value="female">Female</ion-option>
              </ion-select>
            </ion-item>

          </ion-list>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="signup-col">
          <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Register</button>
        </ion-col>  
      </ion-row>

    </form>
  </div>
</ion-content>
2

@omgitsroy All your ion-selects are bound to the same property in your component class: registerCredentials. Use [(ngModel)]="..." with different properties for every ion-select, like:

<ion-select name="goalsOfTraining" [(ngModel)]="goalsOfTraining"  multiple="true">
...
<ion-select name="activityLevel" [(ngModel)]="activityLevel">
...

And so on…

In your component class (ts file) create a property to be used for each ion-select:

public goalsOfTraining: Array<string>;
public activityLevel: string;
...