在 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

你快到了，你可以做这样的事情：

个人-info.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" />

Answer 2

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

使用与 main.
你使用的必要变量@Input，所以。例如对于“个人信息”，您需要

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

这些函数是 eventEmitter，因此您需要个人信息

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

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

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

部分功能需要翻译成组件
您还需要复制 .css。我选择将 .css 放在 styles.css （所有应用程序通用

我分叉了你的 stackblitz here

在 Angular 中将表单分成组件

Separate Forms into Components in Angular

angular

angular-reactive-forms

angular-forms