src/ng-xform/form-group/form-group.component.ts
This component builds a form with input components from fields list.
:fields: List of configurations to build fields. :editing: Flag to control components state
| selector | ng-xform-form-group |
| templateUrl | ./form-group.component.html |
Inputs |
editing
|
Type: |
fields
|
Type: |
form
|
Type: |
isHorizontal
|
Type: |
labelWidth
|
Type: |
import { FormGroup } from '@angular/forms';
import { Component, Input } from '@angular/core';
import { DynamicField } from '../fields/dynamic-field';
/**
* This component builds a form with input components from fields list.
*
* :fields: List of configurations to build fields.
* :editing: Flag to control components state
*/
@Component({
selector: 'ng-xform-form-group',
templateUrl: './form-group.component.html',
styles: []
})
export class FormGroupComponent {
@Input() fields: DynamicField[];
@Input() form: FormGroup;
@Input() editing: boolean;
@Input() isHorizontal: boolean;
@Input() labelWidth: number;
}
<div [formGroup]='form'>
<div *ngFor="let field of fields">
<div [ngSwitch]="field.controlType">
<ng-template [ngSwitchCase]="'GROUP'">
<hr *ngIf='field.label'>
<h4 *ngIf='field.label'>
{{field.label}}
</h4>
<div [formGroupName]="field.key">
<ng-xform-form-group [fields]='field.fields' [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [form]='form.get(field.key)' [editing]='editing'>
</ng-xform-form-group>
</div>
</ng-template>
<ng-xform-measure-field *ngSwitchCase="'MEASURE'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [formControlName]="field.key" [editing]="editing !== false">
</ng-xform-measure-field>
<ng-xform-number-field *ngSwitchCase="'NUMBER'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-number-field>
<ng-xform-editable-label *ngSwitchCase="'TEXT'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-editable-label>
<ng-xform-multiline-field *ngSwitchCase="'MULTILINE'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-multiline-field>
<ng-xform-checkbox-field *ngSwitchCase="'CHECKBOX'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-checkbox-field>
<ng-xform-custom-field *ngSwitchCase="'CUSTOM'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-custom-field>
<ng-xform-radiogroup-field *ngSwitchCase="'RADIOGROUP'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [editing]="editing !== false">
</ng-xform-radiogroup-field>
<ng-xform-select-field *ngSwitchCase="'SELECT'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [formControlName]="field.key" [editing]="editing !== false">
</ng-xform-select-field>
<ng-xform-date-field *ngSwitchCase="'DATE'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [formControlName]="field.key" [editing]="editing !== false">
</ng-xform-date-field>
<ng-xform-date-range-field *ngSwitchCase="'DATERANGE'" [labelWidth]="labelWidth" [isHorizontal]="isHorizontal" [field]="field" [form]="form" [formControlName]="field.key" [editing]="editing !== false">
</ng-xform-date-range-field>
<pre *ngSwitchDefault>{{ field | json}}</pre>
</div>
</div>
</div>