Question

我希望能够多次重复使用整个表单（反应性表单）。我当时在网上寻找答案，但只找到了重用部分表单然后将其包含在父表单中的方法（例如Address）。

这是我想做的事情：我有一个模型，比方说User。因此，我创建了一个带有子组件的UserComponent：

UserListComponent（包含所有用户表的页面）
UserCreateComponent（页面后面带有用于创建新用户和逻辑的表单）
UserDetailsComponent（有关所选用户的详细信息的页面）
UserUpdateComponent（页面中包含用于更新现有用户+背后逻辑的表格）

所以我在想，是否有一种方法可以创建例如UserFormComponent并以某种方式在UserCreateComponent和UserUpdateComponent中使用它，所以我不需要编写该模板+逻辑两次？另外，还有一种方法可以处理父组件而不是表单组件中的创建/更新逻辑。例如，将在service.create()中调用UserCreateComponent，并在service.update()中调用UserUpdateComponent。

另外，如果我要完全解决这个问题或是否有更好的方法可以解决此问题，请告诉我。我对Angle 2+还是陌生的，所以我仍在弄清楚。

谢谢

Answer 1

这是一个建议。使用公共组件创建和更新，而无需使用两个单独的组件，例如UserCreateComponent和UserUpdateComponent。

比方说，公用部分是UserUpsertComponent。要确定组件是用于渲染用户创建属性还是用户编辑属性，请使用简单的布尔值isEdit。您可以将其用作输入。

<app-user-upsert-component 
    [isEdit]="true when your editing the user"
    [userData]="null when creating a user">
</app-user-upsert-component>

在大多数情况下，您将从UserUpsertComponent导航到uUserListComponent。因此，您可以使用路由参数来确定是要创建用户还是要编辑用户。根据路线参数，可以使isEdit为真或为假。

import { Component, Input } from "@angular/core";
import { FormBuilder, Validators, FormGroup } from "@angular/forms";

import { UserService } from 'path/to/your/service';

import { UserData } from '../models';

@Component({
  selector: 'app-user-upsert-component',
  styleUrls: ['./app-user-upsert-component.scss'],
  templateUrl: './app-user-upsert-component.html'
})
export class UserUpsertComponent {

  @Input()
  public isEdit: boolean;
  @Input()
  public userData: UserData;

  private form:FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) { }

  public ngOnInit(): void {
    this.initFormGroup();
  }

  public onFormSubmit(): void {
    const value = this.form.value;
    if (!this.isEdit) {
      this.userService.createUser(value);
    } else {
      this.userService.updateUser(value);
    }
  }

  private initFormGroup(): void {
    if (!this.isEdit) {
      this.form = this.fb.group({
        name: [null, Validators.required],
        age: [null, Validators.required]
      });
    } else {
      this.form = this.fb.group({
        name: [this.userData.name, Validators.required], //userData is a component input
        age: [this.userData.age, Validators.required]
      });
    }
  }
}

Answer 2

您好，您可以创建带有组件的模块，并且可以在任何地方导出和使用此表单。如果您想使用动态表单，可以按照本教程https://angular.io/guide/dynamic-form

进行操作

重用整个表格，而不仅仅是其中一部分

2 个答案: