I have created a login form using angular reactive form. I've facing some strange behavior

If I submit the form using the submit button, I get the latest values which I've entered. If I submit the form using Enter key, then the value received is not latest. I've added the code below, can anyone pls suggest what i'm doing wrong.

```js
ngOnInit() {
    this.loginForm = this.formBuilder.group(
      {
        username: new FormControl(),
        password: new FormControl(),
        RememberMe: []
      },
      {
        updateOn: 'blur'
      }
    );
  }

  login() {
    const formvalue = this.loginForm.value;
    console.log(formvalue);
    return;

  }
```

```html
<div class="limiter">

<div class="container-login100 img-bg">

<div class="wrap-login100">
  <img class="logo-center" src="../../../../assets/images/logo-big.png" />
  <form [formGroup]="loginForm">
  <div class="ui segment">
    <h2>Login Form</h2>
      <div class="ui form" >
        <div class="required inline field">
          <label>Username</label>
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input type="text" name="Username" placeholder="username" formControlName="username" >
          </div>
        </div>
        <div class="required inline field">
            <label>Password</label>
            <div class="ui left icon input">
                <i class="lock icon"></i>
              <input [type]= "'password'" placeholder="password" formControlName="password" >
            </div>
          </div>
          <div class="field login-ckeck">
            <sui-checkbox>
                Remember me
            </sui-checkbox>
        </div>
          <button [ngClass]= "'ui primary button'" (click)= "login()">Submit</button> <a href=""> &nbsp; &nbsp; Forgot your password? </a>
      </div>
  </div>
</form>
</div>

<!-- <footer class="footer">footer</footer> -->

</div>
</div>
```