Angular 7: Forms Container with Reactive Forms

Creating dynamic SSOT form

Creating form in Angular could be tedious even with the help of Form Builder. Hence I come out with this utility to simplify the task much further.

Preview component

Simple component just for previewing the value of the object model currently being edited.

@Component({
  selector: 'my-preview',
  template: `
<div>
  <h3>Preview</h3>
  <pre><code>{{form?.value|json}}</code></pre>
</div>
`
})
class Preview {
  @Input() form: FormGroup
}

Form Container

Form Container is used to be the parent of any other forms. Using this we can concentrate the logic on single component either to manipulate or futher processing of the object model being edited by all forms contain in the component.

@Component({
  selector: 'my-forms-container',
  template: `
<div class="container">
  <my-editor title="Name" (change)="onChange('name',$event)"></my-editor>
  <my-editor title="Alias" (change)="onChange('alias',$event)"></my-editor>
  <my-preview [form]="form"></my-preview>
  <!--<div>
    <h3>Main Form</h3>
    <pre><code>{{form?.value|json}}</code></pre>
  </div>-->
</div>
`, styles: [`.container>*{margin-bottom:1rem;}`]
})
class FormsContainer {
  private fb: FormBuilder = new FormBuilder()
  form: FormGroup = this.fb.group({
    name: null,
    alias: null,
  })
  onChange(key: string, form: FormGroup) {
    if (form.value) {
      //this.form = form
      this.form.setControl(key, form)
    }
  }
}

Updated