在 Angular 中将表单分成组件 [英] Separate Forms into Components in Angular

问题描述

我已成功构建了一个页面，其中包含两种表单.我在如何将这两种形式分成单独的组件方面遇到困难.我已经为每个表单添加了组件.我将如何以推荐和正确的方式做到这一点?

I have successfully built a page where it has two forms. I'm having difficulty on how to separate the two forms into separate components. I already added components for each forms. How would I do it the recommend and correct way?

请在这里查看我的 stackblitz 点击这里

Pls check my stackblitz here CLICK HERE

this.personalDetails = this.formBuilder.group({
  name: ["", Validators.required],
  email: ["", Validators.required],
  phone: ["", Validators.required],
});
this.addressDetails = this.formBuilder.group({
  city: ["", Validators.required],
  address: ["", Validators.required],
  pincode: ["", Validators.required],
});

推荐答案

要将一个大的 .html 分成两个组件，您可以分三步进行

To divide a large .html in two components you can make in three steps

1. 使用与主文件相同的 .html.
2. 你使用的必要变量@Input，所以.例如用于个人信息"你需要

1. Use the same .html that the main.
2. The necesaries variables you use @Input, so. e.g. for "personal-info" you need

      @Input() personalDetails:FormGroup
      @Input() personal_step = false;

1. 函数是 eventEmitters，所以对于个人信息，你需要

    @Output() next:EventEmitter<any>=new EventEmitter<any>()

1. 稍微改变一下 .html - 真正摆脱 "*ngIf="step==1" 和更改 (click)=next()" 以使用输出

1. Change a bit the .html -really get out the "*ngIf="step==1" and change the (click)="next()" to use the Output

    <input (click)="next.emit(null)" .../>

1. 有些功能需要翻译成组件
2. 您还需要复制 .css.我选择把.css放在styles.css中(所有应用程序通用

我分叉了你的 stackblitz 这里

I forked your stackblitz here

这篇关于在 Angular 中将表单分成组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！