在 Angular 中将表单拆分为组件

Question

我已经成功地建立了一个页面，它有两种形式。我很难将这两种形式分成单独的组件。我已经为每个表单添加了组件。我将如何以推荐和正确的方式做到这一点？

请在这里查看我的 stackblitz 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],
});

Answer 1

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

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

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

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

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

4. 稍微改变一下 .html - 真的去掉 "*ngIf="step==1" 和 更改 (click)="next()" 以使用输出

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

5. 有些功能需要翻译成组件
6. 您还需要复制 .css。我选择将 .css 放入 styles.css （所有应用都通用

我 fork 你的 stackblitz here

Answer 2

你快到了，你可以这样做：

个人信息.component.ts

import { Component, Input, OnInit } from '@angular/core';

export interface PersonalInfo {
  name: string
  email: string
  phone: string
}

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.css']
})
export class PersonalInfoComponent implements OnInit {

  @Input() personal: PersonalInfo; // <---- input data for your component

  constructor() { }

  ngOnInit() {
  }

}

然后在个人组件html中：

<form>
  <input type="text" [(ngModel)]="personal.name" />
</form>

在您的应用组件中，类似：

<personal-info [personal]="currentUser.personalInfo" />