Angular 4可重用添加编辑组件

Question

我是角色4的新手并且正在处理表单（反应形式）。这里我们使用相同的表单组件进行添加和编辑。对于创建新的和更新，我使用相同的功能。因此，每当我们保存表单时，我们都在创建新实例并使用data更新所有字段。这里的一些字段数据是唯一的。例如，一旦保存了新表单，就不应修改由字段数据创建的创建日期。但是这里每当我编辑表格时，两者都在更新。

formcomponent.html：

<div class="panel panel-default">
<div class="panel-heading">
    <span translate>{{isEditMode ? 'Edit' : 'New'}} Measure Protocol</span>
</div>
<div class="panel-body">
    <form [formGroup]="Form">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="Title">
                        <span>Number </span>
                        <span class="required">*</span>
                    </label>
                    <div>
                        <input type="number" formControlName="Number" id="Number" class="ex-full-width" />
                    </div>
                </div>
                <div class="form-group">
                    <label>
                        <span>Name</span>
                        <span class="required">*</span>
                    </label>
                    <div>
                        <input type="text"  formControlName="Name" id="Name" class="ex-full-width" />
                    </div>
                </div>
            </div>
        </div>
        <div class="action-btns-wrapper text-left">
            <button type="button" class="btn btn-primary" 
                  (click)="saveChanges()">
                <span translate>Save & Back</span>
            </button>
        </div>
    </form>
</div>

form.component.ts

        //#region import
        import { Component, OnInit, ViewChild } from '@angular/core';
        import { FormBuilder, FormGroup, Validators, FormControl } from 
         '@angular/forms';
        import { HelperService, PdfSetting } from 
         './../../../_services/helper.service';
        import { ActivatedRoute } from '@angular/router';
        import { SelectItem, ConfirmationService,} from 'primeng/primeng';
        import { Options } from './../../../_models/options';
        import { BaseServices } from './../../kuba.services';
        import { MeasureProtocolService } from './../services/measure-
        protocol.services';
        import { MPClientUsers } from './../models/measure-protocol';
        import { MP } from './../models/measure-protocol';

        @Component({
              selector: 'measure-protocol-form',
              templateUrl: 'measure-protocol-form.component.html'
         })

        export class FormComponent implements OnInit {
           @ViewChild(ToasterComponent) toasterComponent: ToasterComponent;
           Form: FormGroup;
           clients: SelectItem[];
           mpClientUsers: MPClientUsers[];

           contracterId: number;
           kundeELId: number;
           isEditMode = false;

constructor(
    private route: ActivatedRoute,
    private fb: FormBuilder,
    private FormService: FormService,
    private confirmationService: ConfirmationService,
    private location: Location, ) {
    this.measureProtocolForm = this.fb.group({
        'Number': ['', Validators.required],
        'Name': ['', Validators.required]
    });
}

ngOnInit(): void {
    this.contracterId = this.route.snapshot.params['id'];
    this.Id = this.route.snapshot.parent.parent.params['id'];
    let res = this.route.snapshot.data['edit'];
    if (res) {
        this.isEditMode = true;
        this.initForm(res);
    } else {
        this.initForm();
    }
}

/**Save form**/
saveChanges(){
    let mp = new MP();
    mp.Id = (this.contracterId) ? this.contracterId : 0;
    mp.Number = this.measureProtocolForm.value.Number;
    mp.Name = this.measureProtocolForm.value.Name;
    mp.ClientId = this.measureProtocolForm.value.ClientId;
    mp.KundeELId =  this.kundeELId;
    mp.CreatedOn = new Date();
    mp.CreatedBy = BaseServices.UserId;
    mp.Status = 1;

    if (mp.Id > 0) {
        mp.ModifiedOn = new Date();
        mp.ModifiedBy = BaseServices.UserId;
        this.FormService
            .updateId)
            .subscribe(result => {
                this.toasterComponent.callToast();
                this.gotoBack();
            });
    } else {
        this.FormService
            .create(Id)
            .subscribe((result) => {
                if (result) {
                    this.toasterComponent.callToast();
                }
                this.gotoBack();
            });

    }
}

initForm(data?: any){
    let Number = '';
    let Name = '';

    if (data) {
        Name = data.Name;
        Number = data.Number;

        this.Form = this.fb.group({
            Number: new FormControl(Number),
            Name: new FormControl(Name)
        });
    }
}

gotoBack(){
    this.location.back();
}

}

model.ts

export class MP {
Id: number;
Name: string;
Number: number;
CreatedBy:number;
ModifiedBy:number;
CreatedOn:Date;
ModifiedOn:Date;

}