Ionic2 ngSwitchWhen error for forms

Question

UPDATE : I updated ngSwitchWhen to ngSwitchCase and then I can see two tabs for login and signup but I get error If ngModel is used within a form tag, either the name attribute must be set or the form

I have a template in my project which looks like following. Basically I do login and registration through same page.

<ion-navbar *navbar>
</ion-navbar>

<ion-content>

  <div align="center">
    <h3>What you want to do?</h3>
  </div>

  <div [ngSwitch]="authType">
    <div padding>
      <ion-segment [(ngModel)]="authType">
        <ion-segment-button value="login">
          Login
        </ion-segment-button>
        <ion-segment-button value="signup">
          Signup
        </ion-segment-button>
      </ion-segment>
    </div>

    <form *ngSwitchWhen="'login'" (ngSubmit)="onSubmitLogin()">
      <div>

        <div>
          <ion-item>
          <ion-label for="username">Username</ion-label>
            <ion-input type="email" id="username" [(ngModel)]="username"></ion-input>
          </ion-item>
        </div>

        <div>
          <ion-item>
            <ion-label for="password">Passwort</ion-label>
            <ion-input type="password" id="password" [(ngModel)]="password"></ion-input>
          </ion-item>
        </div>
      </div>

      <div>
        <button block type="submit">Login</button>
      </div>
    </form>

    <form *ngSwitchWhen="'signup'" (ngSubmit)="onSubmitRegister()">
      <div>

        <div>
          <ion-item>
            <ion-label for="username">Username</ion-label>
            <ion-input type="text" id="username" [(ngModel)]="username"></ion-input>
          </ion-item>
        </div>

        <div>
          <ion-item>
            <ion-label for="email">Email</ion-label>
            <ion-input type="email" id="email" [(ngModel)]="email"></ion-input>
          </ion-item>
        </div>


        <div>
          <ion-item>
            <ion-label for="password1">Password</ion-label>
            <ion-input type="password" id="password1" [(ngModel)]="password1"></ion-input>
          </ion-item>
        </div>

        <div>
          <ion-item>
            <ion-label for="password2">Repeat Password</ion-label>
            <ion-input type="password" id="password2" [(ngModel)]="password2"></ion-input>
          </ion-item>
        </div>


      </div>

      <div>
        <button block type="submit">Sign up</button>
      </div>

    </form>  

  </div>

</ion-content>

This gives me error Template parse errors: Can't bind to 'ngSwitchWhen' since it isn't a known property of 'form'.

This code used to work in one of my older Ionic2 project. Has anything changed or am I doing anything wrong?

Answer 1

在输入标签上添加名称属性解决了该问题：

<ion-input type="text" id="username" name="username" [(ngModel)]="username"></ion-input>