DevExtreme dynamic form updates

app.component.css

::ng-deep .first-group,
::ng-deep .second-group {
    padding: 20px;
}

::ng-deep .second-group {
    background-color: rgba(191, 191, 191, 0.15);
}

::ng-deep .form-avatar {
    height: 128px;
    width: 128px;
    margin-right: 10px;
    border: 1px solid #d2d3d5;
    border-radius: 50%;
    background-image: url('images/petersmith.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

app.component.html

<dx-form id="form"
	[formData]="employee">
	<dxi-item itemType="group" cssClass="first-group" [colCount]="4">
		<dxi-item>
			<div class="form-avatar"></div>
		</dxi-item>
		<dxi-item itemType="group" [colSpan]="3">
				<dxi-item dataField="FirstName"></dxi-item>
				<dxi-item dataField="LastName"></dxi-item>
				<dxi-item dataField="BirthDate" editorType="dxDateBox" [editorOptions]="{ width: '100%'}"></dxi-item>
		</dxi-item>
	</dxi-item>
    <dxi-item
              editorType="dxCheckBox"
              [editorOptions]="{
                  text: 'Toggle Group',
                  value: true,
                  onValueChanged: toggleGroupValueChange
                }"
              >
        <dxo-label [visible]="false"></dxo-label>
    </dxi-item>
	<dxi-item name="ToggleGroup" itemType="group" cssClass="second-group" [colCount]="2">
		<dxi-item itemType="group">
			<dxi-item dataField="Address"></dxi-item>
			<dxi-item dataField="City"></dxi-item>
			<dxi-item dataField="Position" editorType="dxSelectBox" [editorOptions]="{ items: positions, value: '' }"></dxi-item>
		</dxi-item>
		<dxi-item itemType="group">
			<dxi-item dataField="State" editorType="dxSelectBox" [editorOptions]="{ items: states }"></dxi-item>
			<dxi-item dataField="ZipCode"></dxi-item>
			<dxi-item dataField="Mobile" [label]="{text: 'Phone'}" [editorOptions]="{ mask: '+1 (000) 000-0000'}"></dxi-item>
		</dxi-item>
		<dxi-item dataField="Notes" [colSpan]="2" editorType="dxTextArea" [editorOptions]="{ height: 140 }"></dxi-item>
	</dxi-item>
</dx-form>

app.component.ts

import { Component, NgModule, enableProdMode, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
	DxSelectBoxModule,
	DxTextAreaModule,
	DxDateBoxModule,
	DxFormModule,
    DxFormComponent
} from 'devextreme-angular';

import { Service, Employee } from './app.service';

if (!/localhost/.test(document.location.host)) {
	enableProdMode();
}

@Component({
	selector: 'demo-app',
	providers: [Service],
	templateUrl: 'app/app.component.html',
	styleUrls: ['app/app.component.css']
})

export class AppComponent {
	employee: Employee;
	positions: string[];
	states: string[];

	@ViewChild(DxFormComponent)
    formCmp: DxFormComponent;

	constructor(service: Service) {
		this.employee = service.getEmployee();
		this.positions = service.getPositions();
		this.states = service.getStates();
	}

	toggleGroupValueChange = (e) => {
        this.formCmp.instance.itemOption("ToggleGroup", "visible", e.value);
    }
}

@NgModule({
	imports: [
		BrowserModule,
		DxSelectBoxModule,
		DxTextAreaModule,
		DxDateBoxModule,
		DxFormModule
	],
	declarations: [AppComponent],
	bootstrap: [AppComponent]
})

export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

app.service.ts

import { Injectable } from '@angular/core';

export class Employee {
	ID: number;
	FirstName: string;
	LastName: string;
	Position: string;
	BirthDate: string;
	HireDate: string;
	Notes: string;
	Address: string;
	City: string;
	State: string;
	ZipCode: string;
	Mobile: string;
	Home: string;
	Email: string;
	Skype: string;
}

let employee: Employee = {
	"ID": 1,
	"FirstName": "John",
	"LastName": "Heart",
	"Position": "CEO",
	"BirthDate": "1964/03/16",
	"HireDate": "1995/01/15",
	"Notes": "John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
	"Address": "351 S Hill St.",
	"City": "Los Angeles",
	"State": "CA",
	"ZipCode": "90013",
	"Home": "555-684-1334",
	"Mobile": "555-684-1335",
	"Email": "jheart@dx-email.com",
	"Skype": "jheart_DX_skype",
};

let positions: string[] = [
	"HR Manager",
	"IT Manager",
	'CEO',
	"Controller",
	"Sales Manager",
	"Support Manager",
	"Shipping Manager"
];

let states: string[] = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"];


@Injectable()
export class Service {
	getEmployee() {
		return employee;
	}

	getPositions() {
		return positions;
	}
	getStates() {
		return states;
	}
}