173 lines
7.0 KiB
TypeScript
173 lines
7.0 KiB
TypeScript
import { DataModel } from '../../entities/DataModel';
|
|
import { Component, Input, OnInit } from '@angular/core';
|
|
import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
|
|
import { FieldBase } from './field-base';
|
|
import { GroupBase } from '../../form/dynamic-form-group/group-base';
|
|
import { DropdownField } from '../../form/fields/dropdown/field-dropdown';
|
|
import { RuleStyle } from '../../entities/common/rulestyle';
|
|
|
|
|
|
@Component({
|
|
selector: 'df-field',
|
|
templateUrl: './dynamic-form-field.component.html'
|
|
})
|
|
|
|
export class DynamicFormFieldComponent {
|
|
@Input() dataModel: DataModel;
|
|
@Input() field: FieldBase<any>;
|
|
@Input() form: FormGroup;
|
|
|
|
private fragment: string;
|
|
|
|
constructor(private route: ActivatedRoute) { }
|
|
|
|
ngOnChanges(changeRecord) {
|
|
}
|
|
|
|
|
|
get isValid() {
|
|
return this.form.controls[this.field.key].valid;
|
|
}
|
|
get isValidRequired() {
|
|
return this.form.controls[this.field.key].hasError("required");
|
|
}
|
|
get isValidPattern() {
|
|
return this.form.controls[this.field.key].hasError("pattern");
|
|
}
|
|
get isValidCustom() {
|
|
return this.form.controls[this.field.key].hasError("forbiddenName");
|
|
}
|
|
|
|
public ngOnInit() { //dropdown lists take only one of the available sources
|
|
for (var i = 0, len = this.dataModel.groups.length; i < len; i++) {
|
|
let dropdownField: any;
|
|
dropdownField = this.dataModel.groups[i].groupFields.find(x => x.controlType == "dropdown");
|
|
if (dropdownField != undefined) {
|
|
if (dropdownField.attributes.sources != undefined)
|
|
dropdownField.options = dropdownField.attributes.sources[0].params;
|
|
}
|
|
|
|
}
|
|
|
|
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
|
|
}
|
|
|
|
ngAfterViewChecked(): void { //navigate to certain section of the page
|
|
try {
|
|
document.querySelector('#' + this.fragment).scrollIntoView();
|
|
} catch (e) { }
|
|
}
|
|
ruleVisibleMethod(field, rule, dataModel) { //visibility rule -- checks if target field is visible
|
|
dataModel.fields.forEach(fld => {
|
|
if (fld.label == rule._target && fld.visible == true)
|
|
field.visible = true;
|
|
|
|
});
|
|
if (field.visible == true)
|
|
return true;
|
|
}
|
|
FieldValueRuleMethod(field, rule) { //fieldValue rule -- checks the value of target and apply rules, at the same time when the field becomes visible
|
|
var targetField = this.dataModel.getFieldByKey(rule._target); //calling the AddvalidationRules we apply the validation rules for the new field
|
|
if (rule._ruleStyle == "range") {
|
|
if (parseInt(rule._from) < parseInt(field.value) && parseInt(field.value) < parseInt(rule._to)) {
|
|
console.log("visible" + field.value)
|
|
targetField.visible = true;
|
|
this.AddvalidationRules(rule._target);
|
|
} else {
|
|
this.hideField(targetField, rule);
|
|
}
|
|
|
|
}
|
|
if (rule._ruleStyle == "boolean") { //boolean Decision field
|
|
let ruleValue = rule.value.__text;
|
|
if (field.value.value.toString() == ruleValue) {
|
|
targetField.visible = true;
|
|
this.AddvalidationRules(rule._target);
|
|
} else {
|
|
this.hideField(targetField, rule);
|
|
}
|
|
}
|
|
if (rule._ruleStyle == "checked") { //checkbox field
|
|
if (field.value == true) {
|
|
targetField.visible = true;
|
|
this.AddvalidationRules(rule._target);
|
|
} else {
|
|
this.hideField(targetField, rule);
|
|
}
|
|
}
|
|
if (rule._ruleStyle == "existence") {
|
|
if (field.visible == "true" || field.visible == true) {
|
|
targetField.visible = true;
|
|
this.AddvalidationRules(rule._target);
|
|
} else {
|
|
this.hideField(targetField, rule);
|
|
}
|
|
}
|
|
if (rule._ruleStyle == "regex") {
|
|
if (new RegExp(rule.__cdata).test(field.value)) {
|
|
targetField.visible = true;
|
|
this.AddvalidationRules(rule._target);
|
|
} else {
|
|
this.hideField(targetField, rule);
|
|
}
|
|
}
|
|
}
|
|
|
|
hideField(targetField, rule) {
|
|
targetField.visible = false;
|
|
targetField.value = ' ';
|
|
if (this.form.controls[rule._target].hasError("pattern"))
|
|
this.form.controls[rule._target].reset(); //the regex error message didn't remove without field reset
|
|
this.form.controls[rule._target].clearValidators(); // when a field is hidden must clear the validators and the errors
|
|
this.form.controls[rule._target].updateValueAndValidity();
|
|
}
|
|
|
|
toggleVisibility(e, field, ckb) { //ckb the checkbox only send this parameter, it's essential to change the field value
|
|
if (ckb)
|
|
field.value = ckb.checked;
|
|
if (field.rules.length != undefined && field.rules.length > 1)
|
|
field.rules.forEach(rule => {
|
|
if (rule._type == "fieldValue") {
|
|
this.FieldValueRuleMethod(field, rule);
|
|
}
|
|
});
|
|
else if (field.rules._type == "fieldValue") {
|
|
this.FieldValueRuleMethod(field, field.rules);
|
|
}
|
|
}
|
|
|
|
AddvalidationRules(field) {
|
|
if (this.dataModel.getFieldByKey(field).attributes.validation != undefined) {
|
|
let arrayVal = new Array();
|
|
this.dataModel.getFieldByKey(field).attributes.validation.forEach(rule => {
|
|
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.existence]) {
|
|
this.dataModel.getFieldByKey(field).required = true;
|
|
arrayVal.push(Validators.required);
|
|
}
|
|
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.regex]) {
|
|
this.dataModel.getFieldByKey(field).regex = rule.regex;
|
|
arrayVal.push(Validators.pattern(rule.regex));
|
|
}
|
|
if (rule.ruleStyle.toString() == RuleStyle[RuleStyle.customValidation]) {
|
|
arrayVal.push(this.forbiddenNameValidator(/nothing/i));
|
|
}
|
|
|
|
});
|
|
this.form.controls[field].setValidators(arrayVal); //Multiple Validators, Usage of array because setValidator override any validators that are provided during initialistaion
|
|
this.form.controls[field].updateValueAndValidity(); //hide--> visible must update the validators
|
|
|
|
}
|
|
|
|
}
|
|
|
|
forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
|
|
return (control: AbstractControl): { [key: string]: any } => {
|
|
const forbidden = nameRe.test(control.value);
|
|
return forbidden ? { 'forbiddenName': { value: control.value } } : null;
|
|
};
|
|
}
|
|
|
|
|
|
} |