Angular 7 Reactive Form возвращает предыдущее введенное значение при нажатии клавиши Enter - PullRequest
0 голосов
/ 04 февраля 2019

Я создал форму входа, используя угловую реактивную форму.У меня странное поведение

Если я отправляю форму с помощью кнопки отправки, я получаю последние введенные значения.Если я отправляю форму, используя клавишу Enter, полученное значение не является последним.Я добавил код ниже, может кто-нибудь, пожалуйста, подскажите, что я делаю неправильно.

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>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Нашел решение, это была ошибка с моей стороны.Мне пришлось изменить updateOn для отправки, чтобы мой код работал

this.loginForm = this.formBuilder.group(
  {
    username: new FormControl(),
    password: new FormControl(),
    RememberMe: []
  },
  {
    updateOn: 'submit'
  }
);
0 голосов
/ 04 февраля 2019

Вы можете прослушивать формы ( ngSubmit ) или напрямую ( keyup.enter ) и затем запускать событие.

<form (ngSubmit)="login()">
<form (keyup.enter)="login()">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...