Angular 8：使用具有多个兄弟组件的单个表单

Question

有没有一种方法可以让我使用反应式表单来使用一个表单并将其用于我的所有其他组件？

我正在制作一个基本的 CRUD 应用程序，它运行良好。问题是每个组件都有自己的模板，但我想使用相同的表单来创建客户信息，使用引导模式中显示的相同表单更新客户信息。

我是新手，无法解决问题。

我创建了一个响应式表单组件，其中包含响应式表单的 html。但我不知道如何在每个组件中重用它们。

Answer 1

是的，您可以向[formGroup]="form" 添加任何元素，它将成为该表单的一部分。它也适用于子组。你应该输入@Input() form: FormGroup。

与输入字段位于同一组件中的任何父 HTML 元素都可以输入 formGroup。

Answer 2

带有排序列表的示例 CRUD：https://sorting-list-angular.web.app/library 整个应用的Git：https://bitbucket.org/mises543/sorting-list/src/master/

这是一个简单的应用程序，其中的 NGXS 有点矫枉过正，但我​​正在学习。它是数据状态管理。它被称为 Redux。

你可以学习一下。

模板：

<div class="add-item-container">
  <mat-label>
    <h2>Add Media</h2>
  </mat-label>
  <section>
    <mat-form-field>
      <input matInput placeholder="Enter title:" type="text" [formControl]='title' required>
      <mat-error *ngIf="title.invalid && !''">{{getErrorTitle()}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-select matInput placeholder="Category:" [formControl]="category" required>
        <ng-container *ngFor="let category of categories">
          <mat-option *ngIf="category != 'All'" [value]="category">{{category}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error *ngIf="category.invalid && !''">{{getErrorCategory()}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <input matInput [matDatepicker]="picker1" placeholder="Upload Date:" [formControl]="uploaded">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field>
    <div class="buttons">
      <ng-container *ngIf="data; then update; else add"></ng-container>
      <ng-template #add>
        <button mat-raised-button color="primary" (click)="onAdd()" [disabled]="title.invalid || category.invalid">Add
          item</button>
      </ng-template>
      <ng-template #update>
        <button mat-raised-button color="primary" (click)="onUpdate()"
          [disabled]="title.invalid || category.invalid">Update
          item</button>
      </ng-template>


      <button mat-raised-button color="primary" (click)="onCancel()">Cancel</button>
    </div>
  </section>
</div>

模板中最重要的是按钮，因此当父组件有输入数据时显示按钮更新或没有任何数据时添加按钮：

<ng-container *ngIf="data; then update; else add"></ng-container>
      <ng-template #add>
        <button mat-raised-button color="primary" (click)="onAdd()" [disabled]="title.invalid || category.invalid">Add
          item</button>
      </ng-template>
      <ng-template #update>
        <button mat-raised-button color="primary" (click)="onUpdate()"
          [disabled]="title.invalid || category.invalid">Update
          item</button>
      </ng-template>

form.component.ts 使用@angular/material 库以防弹出对话框：

categories = MediaOptions.CATEGORIES

  uploaded = new FormControl(new Date(), [Validators.required])
  title = new FormControl('', [Validators.minLength(5), Validators.required])
  category = new FormControl('', [Validators.required])

  constructor(private store: Store,
    private snackBar: SnackService,
    public dialogRef: MatDialogRef<AddItemComponent>,
    @Inject(MAT_DIALOG_DATA) public data?: any) {}

  ngOnInit(): void {
    if(this.data) {
      this.title.setValue(this.data.title)
      this.category.setValue(this.data.category)
      this.uploaded.setValue(this.data.uploaded)
    } else {
      this.uploaded.setValue(new Date())
    }
  }

带有功能打开对话框的父组件：

constructor(private store: Store, private snackBar: SnackService, private dialog: MatDialog) { }

  async ngOnInit() {
    this.store.dispatch(new GetMedia())
  }

  editItem(payload: any) {
    this.dialog.open(AddItemComponent,
      { width: '500px', data: payload });
  }

  addItem() {
    this.dialog.open(AddItemComponent,
      { width: '500px' });
  }