Add/Edit mode in Dumb component

Question

I have these:

• Smart Component: has in HTML the dumb components
• Dumb Component 1: has submit button and some form controls
• Dumb Component 2: has 'name' form control and no buttons. I will call it DC2 for easier reference.

DC2 has an <input> for a 'name' form control. If smart component receives existing object from database, then in DC2 I need to show the existing name and allow the user to change it. Otherwise show empty input. So, DC2 is in Add or Edit mode.

I defined in DC2 the 'name' form control with validations. I need to populate the <input formControlName="name"> if the object exists in database, so I set Input() on the form group to receive the database name. The problem is, now I need to send an Input() nameFormGroup in case it exists in database. So I need to define the form group in smart component and DC2 also. I need to keep the FormGroup definition in the dumb component to keep it reusable and because thats how all tutorials do it.

The problem is I have to define the FormGroup with its validations in smart component and DC2. How to handle this? Others use two components for add and edit mode, but I don't know how to approach this while maintaining the pattern.

dumb2.component.ts

export class AddEditNameComponent {
  @Input() form: FormGroup;

  ngOnInit(): void {
    this.form = this.initFormGroup();
  }

  private initFormGroup() {
    return new FormGroup({
      id: new FormControl(0),
      name: new FormControl('', [Validators.required]),
    });
  }
}