Как сбросить реактивную форму в angular 5 с помощью поля формы материала

Мне нужно вернуть форму в исходное состояние после отправки формы. Я использую поля формы материала в своей FormGroup для создания полей ввода. Итак, когда я вызываю метод сброса из группы форм, форма не возвращается в исходное состояние, вместо этого она проверяет, переведены ли все поля в недопустимое состояние.

Мой шаблон формы

<form [formGroup] = "createUserForm" (ngSubmit) = "createUser()" novalidate class = "add_user_form normal_form">
      <div class = "form_input_field">
          <i class = "fas fa-user"></i>
        <mat-form-field>
            <input formControlName = "uname"  matInput placeholder = "UserName*">
            <mat-error *ngIf = "createUserForm.controls['uname'].hasError('required') && formSubmitted">
              Please enter your username
            </mat-error>
          </mat-form-field>
      </div>
     <div class = "form_button_field">
        <button mat-raised-button class = "form_btn_submit" color = "primary">Submit</button>
        <button mat-raised-button type = "reset" class = "form_btn_cancel" color = "warn">Cancel</button>
      </div>
    </form>  

Моя функция отправки

createUser() {
    if (this.createUserForm.valid) {
      this.createUserForm.reset();
    }
  }

Как вернуть форму в исходное состояние после сброса?

Я знаю, что это запоздалый комментарий, но получилось ли у вас это сработать? Можете ли вы добавить машинописный текст, который вы используете для создания экземпляра формы?

red_dorian 14.06.2018 18:01

Это проблема Angular Material. В настоящее время для него есть открытая проблема с GitHub: github.com/angular/material2/issues/13240

knoia 07.11.2018 22:09
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
2
670
0

Другие вопросы по теме