Angular 如何使用添加表单作为编辑？

我有这样一个简单的add表单

    <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="floatEmail">Product Name</label>
                    <input type="text" class="form-control"  name="name" formControlName="name" >
                    <div *ngIf="submitted && f.name.errors">
                        <small class="form-text text-muted danger" *ngIf="f.name.errors.required" >Please enter a name!</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="floatEmail">Product Arabic Name</label>
                    <input type="text" class="form-control"  name="arname" formControlName="arname" >
                    <div *ngIf="submitted && f.arname.errors">
                        <small class="form-text text-muted danger" *ngIf="f.arname.errors.required" >Please enter a arname!</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <fieldset class="form-group">
                    <label for="placeTextarea">Product Description</label>
                    <textarea class="form-control" id="placeTextarea" rows="3" name="description" formControlName="description" placeholder="Textarea with placeholder"></textarea>
                    <div *ngIf="submitted && f.description.errors">
                        <small class="form-text text-muted danger" *ngIf="f.description.errors.required" >Please enter a description!</small>
                    </div>
                </fieldset>
            </div>
        </div>
        -->

        <div class="form-group">
            <div class="col-md-12 text-right">
                <button type="button" class="btn btn-success btn-raised mr-1">Cancel</button>
                <button type="button" class="btn btn-danger btn-raised" (click)="onSubmit()">Submit</button>
            </div>
        </div>
    </form>

我需要知道如何使用与“编辑”相同的表单

意思是在编辑中，我有输入中的所有字段，但我如何知道它是编辑调用而不是添加调用

我只是使用一个路由器链接，像这样，我需要传递一些东西，以便我知道它的编辑形式还是什么

routerLink="/full-layout/edit-form"

---

您可以在编辑模式下向窗体传递一些参数标志。在表单中，您可以检查标志值并决定添加模式或编辑模式。

您可以在路由中放置一些ID，以识别此页面处于编辑模式：

{
路径：“完整布局/：选项”，
组件：FullLayoutComponent，
}，

您可以使用对象作为ngModel，因此当您要创建新产品时，您可以将主对象的所有字段设置为null（以便从表单中更改它们），当您编辑产品时，您只需将产品克隆到ngModel产品中

大概是这样的：

.ts:

html:

这将有助于解决您的问题！：）

routerLink="/full-layout/edit-form"

editProduct(){
   this.formProduct = productToEdit;
}

createProduct(){
   this.formProduct = new Product();
}

<input type="text" class="form-control" [(ngModel)]="formProduct.arname" name="arname" formControlName="arname" >