How to build a form from a form model

Tags:

Profile
SuMoTuWeThFrSa
5 26 27 28 29 30 31 1
6 2 3 4 5 6 7 8
7 9 10 11 12 13 14 15
8 16 17 18 19 20 21 22
9 23 24 25 26 27 28 29
10 1 2 3 4 5 6 7 
{
  "username": null,
  "email": null,
  "mobile": null,
  "homepage": null,
  "tags": [],
  "profile": {
    "birthday": null,
    "gender": null,
    "height": null,
    "weight": null
  }
}
No documentation yet

Authors:Zhicheng Wang

<div *ngIf="form" [formGroup]="form">
  <p>
    <button (click)="setValue1()" class="btn btn-primary" type="button">Set value 1</button>
    <button (click)="setValue2()" class="btn btn-primary" type="button">Set value 2</button>
  </p>

  <div class="form-group" uiFormField>
    <label for="username">Username</label>
    <input class="form-control" formControlName="username" id="username" name="username"
           type="text"/>
    <ui-field-error></ui-field-error>
  </div>
  <div class="form-group" uiFormField>
    <label for="email">Email</label>
    <input class="form-control" formControlName="email" id="email" name="email"
           type="text"/>
    <ui-field-error></ui-field-error>
  </div>
  <div class="form-group" uiFormField>
    <label for="mobile">Mobile</label>
    <input class="form-control" formControlName="mobile" id="mobile" name="mobile"
           type="text"/>
    <ui-field-error [messages]="{pattern: 'Should be a valid mobile'}"></ui-field-error>
  </div>

  <div class="form-group" uiFormField>
    <label for="homepage">Homepage</label>
    <input class="form-control" formControlName="homepage" id="homepage" name="homepage"
           type="text"/>
    <ui-field-error></ui-field-error>
  </div>

  <div #tags="uiFormArray" class="form-group" formArrayName="tags">
    <label for="tags">Tags</label>
    <div *ngFor="let control of tags.items" class="form-group" uiFormField>
      <div class="input-group">
        <input [formControl]="control" class="form-control" id="tags" name="tags"
               type="text"/>
        <div class="input-group-append">
          <button (click)="tags.removeItem(control)" class="btn btn-primary">
            <i class="fa fa-close"></i>
          </button>
        </div>
      </div>
      <ui-field-error></ui-field-error>
    </div>
    <div>
      <button (click)="tags.createItem()" class="btn btn-primary" type="button">
        <i class="fa fa-plus-circle"></i>
        Add a new tag
      </button>
    </div>
  </div>

  <ui-panel #profile="uiFormGroup" formGroupName="profile" title="Profile">
    <div class="form-group" uiFormField>
      <label>Birthday</label>
      <ui-calendar formControlName="birthday"></ui-calendar>
      <ui-field-error></ui-field-error>
    </div>
    <div class="form-group" uiFormField>
      <label>Gender</label>
      <ui-radio-group [options]="genders" formControlName="gender"></ui-radio-group>
      <ui-field-error></ui-field-error>
    </div>
    <div class="form-group" uiFormField>
      <label for="height">Height(CM)</label>
      <input class="form-control" formControlName="height" id="height" name="height"
             type="number"/>
      <ui-field-error></ui-field-error>
    </div>
    <div class="form-group" uiFormField>
      <label for="weight">Weight</label>
      <input class="form-control" formControlName="weight" id="weight" name="weight"
             type="number"/>
      <ui-field-error></ui-field-error>
    </div>
  </ui-panel>
  <ui-field-error [field]="profile"></ui-field-error>
</div>
<app-json-viewer [value]="form.value"></app-json-viewer>