Блог

Главная - Вопросы по программированию - Как сбросить formbuilder в другом компоненте?

Как сбросить formbuilder в другом компоненте?

#angular #formbuilder

Вопрос:

В настоящее время я использую шаговый шаг углового материала для перемещения между шагами. На шаге 1 у меня есть форма регистрации, на шаге 2 я могу отправить и нажать на новую регистрацию, которая возвращает меня к шагу 1. Однако первые регистрационные данные, которые я ввел, все еще находятся в форме.

У меня есть 2 компонента:

регистрация.компонент.ts

 export class RegistrationComponent implements OnInit {
  registrationForm: FormGroup;
   ...
}

export class SubmitComponent {

newRegistration(){
 // this.registrationForm.Reset();  ---> Logic needed here
}
}

Можно ли сбросить форму регистрации, которая находится в компоненте регистрации, из компонента отправки?

Комментарии:

1. попробуйте воспользоваться сервисом. или вы можете сбросить шаг и группу форм при отправке.

2. Что это за структура? Используются ли оба компонента в родительском компоненте? Я предлагаю передать состояние с событием @Output, чтобы вы могли услышать в родительском компоненте о событии отправки в SubmitComponent и сбросить группу форм в RegistrationComponent.

Ответ №1:

Оба комментария к вашему вопросу являются действительными решениями здесь:

  1. Службы Службы предназначены для того, чтобы содержать логику (и управлять состоянием в некоторых ситуациях), и несколько компонентов могут вводить один и тот же экземпляр службы. Все шаги/компоненты вашего мастера могут взаимодействовать через эту службу.

RegistrationComponent <-> RegistrationService <-> SubmitComponent 

 SubmitComponent.newRegistration() // calls RegistrationService.resetForm()

// maybe uses an EventEmitter here that the RegistrationComponent could subscribe to? 
// Or hold the form's value here, then tie the actual FormGroup to the value in the service? 
// Many different ways to handle this
RegistrationService.resetForm()  // emits something or updates form state/value

RegistrationComponent.registrationForm.reset() // calls the reset() method on the FormGroup
  1. Родительский компонент Если у вас есть родительский шаблон, который охватывает все компоненты мастера, то @Output() это то, что вам нужно:
 <wizard-wrapper>
  <registration-component #registration></registration-component>
  <submit-component (resetClicked)="registration.resetForm()"></submit-component>
</wizard-wrapper>
 
 class RegistrationComponent {

  resetForm() {
    this.registrationForm.reset();
  }
}


class SubmitComponent {

  @Output()
  public resetClicked = new EventEmitter();

  newRegistration() {
    // do stuff

    // on emission, the template detects this and calls the `resetForm` method in that component
    this.resetForm.emit();
  }
Метки: