Should I use two components for edit and create form in angular?

Question

I made a create form which makes post data to the database. Now I need to make an update form. Do I need to create a separate component for update form? Or should I use the same component for both update and create form?

here is my template code,

template: `
    <form novalidate (ngSubmit)="this.createExperience()" [formGroup]="this.formGroup">
         <div formArrayName="dayanddescriptions">
                        <div class="panel panel-default" *ngFor="let dayAndDescription of this.formGroup.controls.dayanddescriptions.controls; let i = index" >           
                            <div class="panel-heading">
                                <span>Day {{i + 1}}</span>
                                <span class="glyphicon glyphicon-remove pull-right" *ngIf="i>0"  
                                (click)="removeDayandDescription(i)">                    
                                </span>
                            </div>          
                            <div class="panel-body" [formGroupName]="i">
                            <!--Day-->
                                <div class="form-group col-xs-4" >
                                    <label for="text">Day</label>
                                    <input  type="text" class="form-control" formControlName="day" [ngModel]="i + 1"  readonly>                    
                                </div>
                            <!--Description-->
                                <div class="form-group col-xs-4">
                                    <label>Description</label>
                                    <input  type="text" class="form-control" formControlName="description">
                                </div>                           
                            </div>
                        </div>
                    </div>
    </form>
   <div class="margin-20">
        <a (click)="addDayandDescription()" style="cursor: default">
        Add another day +
        </a>
    </div>
    <pre> form: {{ this.formGroup.value | json }} </pre>
  `,
here is the component,
ngOnInit() {   
      this.createForm();
  } 
  public buildForm(buildFormObject) {        
     this.formGroup = buildFormObject;        
  }
   initDayandDescription() {       
      return this._formBuilder.group({
          day: ['', Validators.required],
          description: [''],
      });
  }   
   addDayandDescription() {
      const control: FormArray = this.formGroup.get('dayanddescriptions') as FormArray;
      control.push(this.initDayandDescription());
  }
  createForm() {
      this.buildForm(this._formBuilder.group({

          dayanddescriptions: this._formBuilder.array([
              this.initDayandDescription(),
          ]),           
          hashtags: '',           
      }));
  } 

Answer 1

you can create a common form component for both.if the router path of form is say
/createform (no parameter) then open form for create mode.Also for edit case we will open that componet with a router param (ex-/createform/edit) and with help of router param you can update the form in edit mode.

to get router param

this.route.paramMap.subscribe(params => {
      console.log(params.get('paramName'));

    });

i have created a stackblitz for you

Answer 2

you could create one common form component, that accept @Input is a FormGroup, then create Edit and Create form, setup form (edit form will have values), passing your form to common form component:

Common

@Component({
  selector: 'tpc-cm-form',
  template: `
   <div [formGroup]="formGroup">
    <input formControlName="example" type="text"> <br>
    <textarea formControlName="sectionContent"></textarea>
   </div>
  `
})
export class CMForm {
  @Input() formGroup: FormGroup;
}

Create

@Component({
  selector: 'tpc-cr-form',
  template: `
   <form [formGroup]="form">
    <tpc-cm-form [formGroup]="form"></tpc-cm-form>
   </form>
  `
})
export class CreateForm {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      example: '',
      sectionContent: ''
    });
  }
}

Edit

@Component({
  selector: 'tpc-ed-form',
  template: `
   <form [formGroup]="form">
    <tpc-cm-form [formGroup]="form"></tpc-cm-form>
   </form>
  `
})
export class EditForm {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      example: '',
      sectionContent: ''
    });

    // fetch data from API for example
    this.form.patchValue({
      example: 'Simple data',
      sectionContent: 'Content textarea'
    });
  }
}

online demo: https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview