Та же форма для создания и редактирования данных в Angular 6 с использованием шаблона, управляемого

Question

Есть 2 компонента. В DashboardComponent есть список созданных форм, а в CreateFormComponent мне нужно выполнить операцию добавления и редактирования созданных форм, которые отображаются в DashboardComponent. Обе операции будут использовать одну и ту же форму. Я могу перемещаться от DashboardComponent к CreateFormComponent по определенному идентификатору, но не могу выполнить операцию редактирования на нем. Код: dashboard.html

<tr 
  *ngFor="let user of users" 
  style="text-align: center;">
  <button 
    mat-mini-fab 
    style="background: white !important;color:black !important;outline:none;" 
    [routerLink]="['/Create_form',user.id]">
        <!--<i class="fa fa-edit" aria-hidden="true"></i>-->
    Edit
  </button>
</tr>

Create_Form:

<form 
  #spfForm="ngForm" 
  (ngSubmit)="createspf(spfForm.value)" 
  ngNativeValidate>
  <mat-form-field style="margin-top:-6%;">
    <mat-select 
      [(ngModel)]="Priority" 
      name="Priority" 
      placeholder="Priority">
      <mat-option value="High">
        High
      </mat-option>
      <mat-option value="Medium">
        Medium
      </mat-option>
      <mat-option value="Low">
        Low
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

Create_form.component.ts:

createspf(value) {
  this.userservice.spf(value).subscribe((res: Response) => [
    this.IsAdded = true,
    console.log(this.confirmationString)
  ]);
}

Answer 1

Поскольку вы на самом деле не предоставили StackBlitz, а у меня нет времени, чтобы создать для вас целый бланк Stackblitz, я предлагаю вам сделать следующее:

В вашем CreateFormComponent, когда в ngOnInit(), инициализируйте ReactiveForm, либо используя FormBuilder, либо создав его вручную, используя FormGroup и FormControls.

Также введите ActivatedRoute в этот компонент и подпишитесь на activatedRouterInstance 's params BehaviorSubject. Если оттуда поступит id, получите сведения об элементе по этому идентификатору и заполните форму, которую вы создали, позвонив по номеру setValue или patchValue.

В случае Create, поскольку в параметрах не будет идентификатора, пользователь увидит только пустую форму. Но в случае редактирования, поскольку значение формы будет достигнуто, пользователь увидит форму, заполненную достигнутыми данными.

Надеюсь, что это имеет какой-то смысл и помогает вам.