CODEWITHSUNDEEP
angular7
dexter
dexter

Reputation: 93

Angular 7 Reactive Form returns previous entered value on Pressing Enter key

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.

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;

  }
<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>

Upvotes: 2

Views: 1002

Answers (2)

dexter
dexter

Reputation: 93

Found the solution, it was an error from my side. I had to change the updateOn to submit, for my code to work

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

Upvotes: 2

Michael
Michael

Reputation: 672

You can listen to either the forms (ngSubmit) or directly to the (keyup.enter) event and trigger the event then.

<form (ngSubmit)="login()">
<form (keyup.enter)="login()">

Upvotes: 0

Related Questions