Angular 8：使用具有多个同级组件的单一表单

Question

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

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

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

我创建了一个反应形式组件组件，它具有用于反应形式的 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' });
  }

Angular 8：使用具有多个同级组件的单一表单

Angular 8: Using a single form with multiple sibling components

angular

angular-reactive-forms

angular8