Skip to content

Hide fields service #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ZenabKhan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Hide fields service #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3db2caf
hide filed functionality added
Jun 14, 2016
0663348
minor test fix
Jun 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/app/shared/form-field/form-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div [ngClass]="{ 'has-error' : !field[1].valid }">
<label>{{ field[0].label }}</label>
<div [ngClass]="{ 'has-error' : !field[1].valid && !field[0].hidden}">
<label *ngIf="!field[0].hidden">{{ field[0].label }}</label>

<span *ngFor="let validation of field[0].validations">
<em class="text-danger" *ngIf="!field[1].valid && field[1]['errors'][validation.type.toLowerCase()]"> {{ validation.message }}</em>
<em class="text-danger" *ngIf="!field[1].valid && !field[0].hidden && field[1]['errors'][validation.type.toLowerCase()]"> {{ validation.message }}</em>
</span>

<div *ngIf="field[0].type == 'select'">
<div [ngClass]="{ 'hide' : field[0].hidden}" *ngIf="field[0].type == 'select'">
<select [ngFormControl]="field[1]"
(change)="updateValue($event)"
(focus)="onTouched()"
Expand All @@ -18,7 +18,7 @@
</select>
</div>

<div *ngIf="field[0].type == 'text'">
<div [ngClass]="{ 'hide' : field[0].hidden}" *ngIf="field[0].type == 'text'">
<input type="text"
[ngFormControl]="field[1]"
class="form-control"
Expand All @@ -27,7 +27,7 @@
placeholder="{{ field[0].placeholder }}" focus-reset-field/>
</div>

<div *ngIf="field[0].type == 'number'">
<div [ngClass]="{ 'hide' : field[0].hidden}" *ngIf="field[0].type == 'number'">
<input type="number"
[ngFormControl]="field[1]"
class="form-control"
Expand All @@ -36,7 +36,7 @@
min="{{ field[0].min }}" />
</div>

<div *ngIf="field[0].type == 'radio'">
<div [ngClass]="{ 'hide' : field[0].hidden}" *ngIf="field[0].type == 'radio'">
<label class="radio-inline" *ngFor="let option of field[0].options">
<input name="field[0].name"
class="btn"
Expand Down
34 changes: 17 additions & 17 deletions src/app/shared/form-field/form-field.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,28 @@ export class FormFieldService {
return [{
section: 'step1',
fields: [
new TextFormField('input_name', 'Your name', '', '', [new RequiredValidator('Required..'), new MinLengthValidator(5, 'Minimum length should be 5'), new MaxLengthValidator(15, 'Maximum length should be 15')]),
new SelectFormField('input_relationship_status', ['Single', 'Couple'], 'Relationship Status', 'Couple'),
new SelectFormField('input_region', [], 'Region', 'Greater London'),
new SelectFormField('input_area', [], 'Area'),
new NumberFormField('input_age_user', 'Age', '0', '0', [new PatternValidator('^([1-9]|[1-9][0-9]|[1][0-4][0-9]|150)$', 'Age must between (min: 1 and max: 150)')]),
new SelectFormField('input_number_of_children', ['0','1','2','3','4','5'], 'Number of chlidren', '0'),
new NumberFormField('input_age_partner', 'Partner Age', '0', '0'),
new TextFormField('input_name', 'Your name', '', false, '', [new RequiredValidator('Required..'), new MinLengthValidator(5, 'Minimum length should be 5'), new MaxLengthValidator(15, 'Maximum length should be 15')]),
new SelectFormField('input_relationship_status', ['Single', 'Couple'], 'Relationship Status', false, 'Couple'),
new SelectFormField('input_region', [], 'Region', false, 'Greater London'),
new SelectFormField('input_area', [], 'Area', false),
new NumberFormField('input_age_user', 'Age', '0', '0', true, [new PatternValidator('^([1-9]|[1-9][0-9]|[1][0-4][0-9]|150)$', 'Age must between (min: 1 and max: 150)')]),
new SelectFormField('input_number_of_children', ['0','1','2','3','4','5'], 'Number of chlidren', false, '0'),
new NumberFormField('input_age_partner', 'Partner Age', '0', '0', false),
]
},
{
section: 'step2',
fields: [
new NumberFormField('input_number_of_disabilities', 'Number of Disabilities', '0', '0'),
new TextFormField('input_savings', 'Savings', '', 'Total savings you currently have',[new RequiredValidator('Required..'), new PatternValidator('^([1-9][0-9]*)$', 'The savings needs to be a number greater than zero.')]),
new NumberFormField('input_dependants', 'Number of Dependants', '0', '0'),
new RadioFormField('input_carer_single', 'Are you a carer?', ['No', 'Yes'], 'Yes'),
new NumberFormField('input_child_age_1', 'Age of Child 1', '0', '0'),
new NumberFormField('input_child_age_2', 'Age of Child 2', '0', '0'),
new NumberFormField('input_child_age_3', 'Age of Child 3', '0', '0'),
new NumberFormField('input_child_age_4', 'Age of Child 4', '0', '0'),
new NumberFormField('input_child_age_5', 'Age of Child 5', '0', '0'),
new SelectFormField('input_child_disability_1', ['Yes', 'No'], 'Relationship Status', 'Single'),
new NumberFormField('input_number_of_disabilities', 'Number of Disabilities', '0', '0', false),
new TextFormField('input_savings', 'Savings', '', false, 'Total savings you currently have', [new RequiredValidator('Required..'), new PatternValidator('^([1-9][0-9]*)$', 'The savings needs to be a number greater than zero.')]),
new NumberFormField('input_dependants', 'Number of Dependants', '0', '0', false),
new RadioFormField('input_carer_single', 'Are you a carer?', ['No', 'Yes'], 'Yes', false),
new NumberFormField('input_child_age_1', 'Age of Child 1', '0', '0', false),
new NumberFormField('input_child_age_2', 'Age of Child 2', '0', '0', false),
new NumberFormField('input_child_age_3', 'Age of Child 3', '0', '0', false),
new NumberFormField('input_child_age_4', 'Age of Child 4', '0', '0', false),
new NumberFormField('input_child_age_5', 'Age of Child 5', '0', '0', false),
new SelectFormField('input_child_disability_1', ['Yes', 'No'], 'Relationship Status', false, 'Single'),
]
}];
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/form-field/form-field.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ import {FormField} from './form-field';

describe('FormField', () => {
it('should create an instance', () => {
expect(new FormField('Something', '')).toBeTruthy();
expect(new FormField('Something', '', '', false)).toBeTruthy();
});
});
13 changes: 9 additions & 4 deletions src/app/shared/form-field/form-field.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export class FormField {
public name: string,
public label: string,
public defaultValue: string = '',
public hidden: boolean,
public validations: Validator[] = []) {}
}

Expand All @@ -16,9 +17,10 @@ export class TextFormField extends FormField {
public name: string,
public label: string,
public defaultValue: string = '',
public hidden: boolean,
public placeholder: string = '',
public validations: Validator[] = []) {
super(name, label, defaultValue, validations);
super(name, label, defaultValue, hidden, validations);
}

}
Expand All @@ -31,9 +33,10 @@ export class SelectFormField extends FormField {
public name: string,
public options: Array<string>,
public label: string,
public hidden: boolean,
public defaultValue: string = '',
public validations: Validator[] = []) {
super(name, label, defaultValue, validations);
super(name, label, defaultValue, hidden, validations);
}

}
Expand All @@ -47,8 +50,9 @@ export class NumberFormField extends FormField {
public label: string,
public min: string = '',
public defaultValue: string = '0',
public hidden: boolean,
public validations: Validator[] = []) {
super(name, label, defaultValue, validations);
super(name, label, defaultValue, hidden, validations);
}

}
Expand All @@ -62,8 +66,9 @@ export class RadioFormField extends FormField {
public label: string,
public options: Array<string>,
public defaultValue: string = '',
public hidden: boolean,
public validations: Validator[] = []) {
super(name, label, defaultValue, validations);
super(name, label, defaultValue, hidden, validations);
}

}
30 changes: 17 additions & 13 deletions src/app/shared/form-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,37 @@ import { FormField, FormFieldService } from './form-field';

@Injectable()
export class FormManager {

public mainForm: ControlGroup;
public fields;

constructor(fb: FormBuilder, formFieldService: FormFieldService) {
this.fields = formFieldService.getFormFields();
let sections = {};

for (let section of this.fields) {
// dynamically generate the control groups
let controlGroup = {};
for (let field of section.fields) {
controlGroup[field.name] = [field.defaultValue].concat(this.getFieldValidators(field));
if (!field.hidden) {
controlGroup[field.name] = [field.defaultValue].concat(this.getFieldValidators(field));
} else {
controlGroup[field.name] = [field.defaultValue];
}
}

sections[section.section] = fb.group(controlGroup);
}
this.mainForm = fb.group(sections);
}

valueUpdated(field: FormField, value: any) {
console.log('Form updated', field.name, value);
}

getFieldValidators(field) {
let result = [];

for (let validation of field.validations) {
result.push((validation.data ? Validators[validation.type](validation.data) : Validators[validation.type]));
}
Expand All @@ -42,18 +46,18 @@ export class FormManager {
let search = [];
this.fields.forEach(section => {
section.fields.forEach(field => {
if(field.name === name) {
if (field.name === name) {
search.push(field);
let control: ControlGroup = <ControlGroup> this.mainForm.controls[section.section];
let control: ControlGroup = <ControlGroup>this.mainForm.controls[section.section];
search.push(control.controls[name]);
}
})
})
if(search.length <= 0)

if (search.length <= 0)
throw new Error(`Field with name: ${name} not found`)
return search;

return search;
}

}