Question

我是Angular的新手，我正在从事一个项目，该项目涉及具有多个页面的表单，该表单收集帐户信息。

我的问题主要与建筑风格和设计有关，因为我正试图找到一种解决方案，以允许对3种不同类型的用户使用相同的表单：

未注册的用户-作为注册页面
注册用户-作为编辑帐户页面
“管理员”用户-查看用户信息并批准其帐户

从概念上讲，表单的每个页面都包含类似于以下内容的结构：

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {             

  contactDataForm: FormGroup;

  constructor(
    private someService: SomeService
  ) { }

  ngOnInit() {
    this.contactForm = this._formBuilder.group({
      address: ['', Validators.required],
      phoneNumber: ['', Validators.required]
    });
  }

  nextStep() {
    this.someService.performSomeAction(this.contactDataForm.value);
    this.router.navigate([nextFormPage]);
  }

  previousStep() {
    this.someService.performAnotherAction(this.contactDataForm.value);
    this.router.navigate([previousFormPage]);
  }
}

我真正感兴趣的是在所有地方模板和样式进行抽象并重用，但是始终在nextStep（）和previousStep（）内部使用不同服务的调用 strong>。

我尝试了基于属性指令的方法，但是我没有设法使它起作用。目前，我正在使用基于继承的方法，其中我有一个BaseContactForm，其中包含提供模板和表单组，以及RegistrationContactForm，其随附RegistrationService和特定的nextStep（），previousStep（）方法，但似乎并不自然。

欢迎任何建议，想法或暗示。在此先感谢您提供的所有帮助。

Angular 6多页表单组件重用

0 个答案: