如何在另一个组件中重置 formbuilder？

Question

我目前正在使用 angular material 步进器在步骤之间移动。在第 1 步中，我有一个表格注册，在第 2 步中，我可以提交并单击新注册，这使我回到第 1 步。但是，我输入的第一个注册详细信息仍在表格中。

我有 2 个组成部分：

registration.component.ts

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

export class SubmitComponent {

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

是否可以从提交组件中重置注册组件中的 registrationForm？

Answer 1

对您的问题的两条评论都是有效的解决方案：

服务服务旨在包含逻辑（并在某些情况下管理状态），并且多个组件可以注入相同的服务实例。您向导中的所有 steps/components 都可以通过此服务进行通信。

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

父组件如果你有一个包装所有向导组件的父模板，那么@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();
  }

如何在另一个组件中重置 formbuilder？

How to reset formbuilder in another component?

formbuilder

angular