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

angular

Solution

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

Problem

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: '', })); } ```

Original source