Multi Step: The `enter` keyboard key not working

Question

I have a multi-step system: the "Enter" key on the keyboard goes back. I would like to go to the following page.

Here is an illustration

The user must choose his language

image 1

Then, I enter the username. When I press the ENTER key on the keyboard.

image 2

I return to the first page???

image 3

I don't understand why the ENTER key returns to the previous page? I would like to go to the following page.

I don't know if this is an HTML or TypeScript/Angular problem?

Thanks very much

HTML

<ng-container *transloco="let t">
   <div class="wrapper">
      <div class="logo">
         <img src="assets/images/logoLogin.png" alt="img" />
      </div>
      <div class="container">
         <div class="row">
            <div id="msform">
               <ul id="progressbar">
                  <li [ngClass]=" step>= 1 ? 'active ' : 'inactive'">Choix de langues</li>
                  <li [ngClass]="step >= 2 ? 'active' : 'inactive'">Connexion</li>
               </ul>
               <ng-container *ngIf="step == 1">
                  <div class="title" style="width: 400px">
                     <h2>Choisissez votre langue svp : </h2>
                     <div class="btn" style="width: 100%">
                        <input (click)="next()" type="submit" name="next" class="btn_language"
                           value="Français" />
                     </div>
                  </div>
               </ng-container>
               <ng-container *ngIf="step == 2">
                  <div class="title">
                     <h3>{{ t("1235") }}</h3>
                  </div>
                  <div class="form-login">
                     <form (ngSubmit)="logon()">
                        <div class="input_field">
                           <label>Identification de l'utilisateur Back Office</label>
                           <input type="text" class="input" name="user" [(ngModel)]="loginForm.user" required
                           maxlength="4">
                        </div>
                        <div class="btn" style="width: 100%">
                           <input (click)="previous()" type="submit" name="previous" class="sign_btn"
                              value="Précédent" />
                           <input type="submit" value="Connexion" class="sign_btn">
                        </div>
                     </form>
                  </div>
               </ng-container>
            </div>
         </div>
      </div>
   </div>
</ng-container>

TS

export class SigninComponent implements OnInit {

    step = 1;
    information_step = false;
    login_step = false;


    loginForm: Login = new Login();
    ngUnsubscribe = new Subject < void > ();

    constructor(private store: Store, private router: Router) {



    }

    ngOnInit(): void {}

    logon(): void {
        if (this.step == 2) {
            this.login_step = true;
            this.router.navigate(
                ["/sessions/logon"], {
                    queryParams: {
                        UID: this.loginForm.user,
                        LNG: "FR",
                        TOKEN: "354C338806BB3CFF859D08FB1222716E",
                        UTI_VX: "",
                        MODECTRL: "T",
                        TODO: "",
                        MENU: "0",
                        DATETIME: "",
                        CPHURL: "",
                    }
                }
            );
        }

    }

    next() {
        if (this.step == 1) {
            this.information_step = true;
            this.step++;
        }
    }

    previous() {
        this.step--;
        if (this.step == 1) {
            this.information_step = false;
        }
    }

}