Question

有2个组成部分。在DashboardComponent中有一个已创建表单的列表，在CreateFormComponent中，我需要对正在DashboardComponent中显示的已创建表单执行添加和编辑操作。两种操作将使用相同的形式。我可以根据特定的ID从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，而且我没有时间为您创建整个Form Stackblitz，因此，我建议您这样做：

在CreateFormComponent的{{1}}中，使用ngOnInit()或使用FormBuilder和FormGroup手动创建一个ReactiveForm来初始化ReactiveForm。

还要在此组件中注入FormControls并订阅ActivatedRoute的{{1}} activatedRouterInstance。如果有params从那里进来，请通过该ID获取该项目的详细信息，并通过在其上调用BehaviorSubject或id来填充您创建的表单。

在创建的情况下，由于参数中没有任何ID，因此用户只会看到一个空表格。但是，在进行编辑的情况下，由于将实现表单的值，因此用户将看到表单中填充了所获得的数据。

希望这对您有所帮助。

使用以下模板驱动在Angular 6中创建和编辑数据的表单相同

1 个答案: