Angular 8: Использование одной формы с несколькими родственными компонентами

Question

Есть ли способ, где я могу использовать одну единственную форму, используя реактивные формы, и сделать ее для использования во всех других моих компонентах?

Я делаю базовое приложение CRUD, и оно отлично работает. Проблема в том, что у каждого компонента есть свой собственный шаблон, но я хочу использовать ту же форму для создания информации о клиенте, обновить информацию о клиенте, используя ту же форму, которая отображается в модале начальной загрузки.

Я новичок и не могу обойти проблему.

Я создал компонент компонента реактивных форм, который имеет HTML-код для реактивных форм. Но я не знаю, как использовать их в каждом компоненте.

Answer 1

Пример CRUD со списком сортировки: https://sorting -list-angular.web.app / library Git всего приложения: https://bitbucket.org/mises543/sorting-list/src/master/

Это простое приложение и NGXS в немэто излишество, но я учусь. это управление состоянием данных. Он лучше известен как Redux.

Вы можете изучить его.

template:

<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>

Наиболее важными в шаблоне являются кнопки, поэтому вы отображаете кнопку Update, когда есть входные данныеиз родительского компонента или добавьте, когда нет никаких данных:

<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 im, используя библиотеку @ 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' });
  }

Answer 2

Да, вы можете добавить к [formGroup]="form" любой элемент, и он будет частью этой формы. Это работает и для подгрупп. Вы должны ввести @Input() form: FormGroup.

Любой родительский элемент HTML в том же компоненте, что и ваше поле ввода, может содержать formGroup.