How to split a form into a number of separated components using reactive form

Tags:

{
  "name": "Tom",
  "basic": {
    "age": 10
  },
  "tags": []
}
No documentation yet

Authors:Zhicheng Wang

<form [formGroup]="form">
  <div class="form-group" uiFormField>
    <label for="name">Name: </label>
    <input [formControl]="name" class="form-control" id="name" type="text"/>
    <ui-field-error></ui-field-error>
  </div>
  <div>
    <app-basic-info-group [group]="basic"></app-basic-info-group>
  </div>
  <div formArrayName="tags">
    <div class="form-group tags">
      <label>Tags:
      </label>
      <div *ngFor="let control of tags.controls;let i = index">
        <div uiFormField>
          <div class="input-group">
            <input [formControlName]="i" class="form-control" placeholder="please input a tag" type="text"/>
            <div class="input-group-append">
              <button (click)="removeTag(i)" class="btn btn-secondary btn-sm">
                <i class="fa fa-remove"></i>
              </button>
            </div>
          </div>
          <ui-field-error></ui-field-error>
        </div>
      </div>
      <button (click)="newTag()" class="btn btn-secondary btn-block">
        <i class="fa fa-plus-circle"></i>
        Add New Tag
      </button>
    </div>

  </div>
  <div class="form-group">
    <button [uiDisabled]="form.invalid" class="btn btn-primary btn-block" type="submit">Submit</button>
  </div>
</form>

<app-json-viewer [value]="form.value"></app-json-viewer>