首页 > 解决方案 > 使用模板驱动的 Angular 6 中创建和编辑数据的相同表单

问题描述

有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)
  ]);
}

标签: angularangular-material

解决方案


由于您并没有真正提供 StackBlitz,而且我没有时间为您创建一个完整的 Form Stackblitz,所以我建议您这样做:

在你的CreateFormComponent,当在 中时ngOnInit(),初始化一个 ReactiveForm,要么使用 a ,要么通过使用andFormBuilder手动创建一个。FormGroupFormControls

也注入ActivatedRoute这个组件并订阅activatedRouterInstance's params BehaviorSubject。如果有任何id来自那里的信息,请通过该 id 获取项目的详细信息,并通过调用setValue或填充您创建的表单patchValue

在 Create 的情况下,由于参数中没有任何 id,用户只会看到一个空表单。但是在编辑的情况下,由于表单的值将被实现,用户将看到表单填充了实现的数据。

希望这有一定的意义,并帮助你。


推荐阅读