时间戳

首页 > 解决方案 > 重用整个表单，而不仅仅是其中的一部分

angular - 重用整个表单，而不仅仅是其中的一部分

问题描述

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

这就是我想做的事情：我有一个模型，比方说User。UserComponent所以我用子组件创建了一个：

所以我想知道，有没有一种方法可以创建例如UserFormComponent并以某种方式在两者中使用它UserCreateComponent，UserUpdateComponent这样我就不需要编写该模板+逻辑两次？此外，有没有办法在父组件中处理创建/更新逻辑而不是表单组件。例如service.create()会被调用UserCreateComponent并且service.update()会被调用UserUpdateComponent。

另外，请让我知道我是否完全错误地解决了这个问题，或者是否有更好的方法来做到这一点。我是 Angular 2+ 的新手，所以我还在想办法。

谢谢

标签： angularhtml

解决方案

这是一个建议。使用一个通用组件来创建和更新，而无需使用两个单独的组件作为UserCreateComponent和UserUpdateComponent。

假设通用组件是UserUpsertComponent. 要确定组件是用于呈现用户创建属性还是用户编辑属性，请使用简单的 boolean isEdit。您可以将其用作输入。

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

在大多数情况下，您将导航到UserUpsertComponentfrom 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]
      });
    }
  }
}

推荐阅读