150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
|
|
import { FormGroup, Validators } from '@angular/forms';
|
|
import { NgForm } from '@angular/forms';
|
|
|
|
//import { FieldBase } from '../../app/form/fields/field-base';
|
|
import { FieldControlService } from '../../app/services/field-control.service';
|
|
import { ServerService } from '../../app/services/server.service';
|
|
import { FieldVisibility } from '../../app/services/fieldVisibility.service';
|
|
import { dataModelBuilder } from '../../app/services/dataModelBuilder.service';
|
|
import { DataModel } from '../entities/DataModel';
|
|
import { GroupBase } from './dynamic-form-group/group-base';
|
|
|
|
@Component({
|
|
selector: 'dynamic-form',
|
|
templateUrl: './dynamic-form.component.html',
|
|
providers: [FieldControlService, ServerService, FieldVisibility, dataModelBuilder]
|
|
})
|
|
export class DynamicFormComponent implements OnInit {
|
|
|
|
@Input() dataModel: DataModel = new DataModel();
|
|
form: FormGroup;
|
|
|
|
payLoad = '';
|
|
|
|
|
|
|
|
|
|
constructor(private qcs: FieldControlService, private serverService: ServerService, private fieldVisibility: FieldVisibility, private dataModelService: dataModelBuilder) {
|
|
this.form = this.qcs.toFormGroup(new Array(), new Array());
|
|
|
|
}
|
|
|
|
|
|
getSubForm(subformName){
|
|
return this.form.controls[subformName];
|
|
}
|
|
|
|
|
|
ngOnInit() {
|
|
/*
|
|
//this.form = this.qcs.toFormGroup(this.fields);
|
|
this.serverService.getHTTPFields()
|
|
.subscribe(
|
|
(data: any[]) => {
|
|
this.fields = this.fieldVisibility.getFieldVisibility(data);
|
|
this.form = this.qcs.toFormGroup(this.fields);
|
|
console.log(this.fields);
|
|
},
|
|
(error) => console.log(error)
|
|
);
|
|
//this.buildForm();
|
|
*/
|
|
|
|
console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
|
|
|
|
|
|
this.serverService.getData()
|
|
.subscribe(
|
|
(data: any[]) => {
|
|
|
|
console.log("this.serverService.getFields");
|
|
|
|
this.dataModel = new DataModel();
|
|
this.dataModel = this.dataModelService.getDataModel(data);
|
|
|
|
this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
|
|
//this.form = this.qcs.toFormGroup(this.fields);
|
|
|
|
console.log("SUMMARY: ======>");
|
|
console.log(this.dataModel);
|
|
console.log(this.form);
|
|
|
|
},
|
|
(error) => console.log(error)
|
|
);
|
|
/*
|
|
|
|
this.serverService.getFields()
|
|
.subscribe(
|
|
(data: any[]) => {
|
|
|
|
console.log("this.serverService.getFields");
|
|
|
|
this.dataModel = new DataModel();
|
|
this.dataModel = this.fieldVisibility.getDataModel(data);
|
|
|
|
this.form = this.qcs.toFormGroupAlt(this.dataModel.fields, this.dataModel.groups);
|
|
//this.form = this.qcs.toFormGroup(this.fields);
|
|
|
|
console.log("SUMMARY: ======>");
|
|
console.log(this.dataModel);
|
|
console.log(this.form);
|
|
|
|
},
|
|
(error) => console.log(error)
|
|
);
|
|
|
|
*/
|
|
|
|
}
|
|
|
|
onSubmit() {
|
|
this.payLoad = JSON.stringify(this.form.value);
|
|
}
|
|
|
|
buildForm(): void {
|
|
//this.form = this.qcs.toFormGroup(this.fields.
|
|
|
|
|
|
this.form.valueChanges
|
|
.subscribe(data => this.onValueChanged(data));
|
|
|
|
this.onValueChanged(); // (re)set validation messages now
|
|
}
|
|
|
|
onValueChanged(data?: any) {
|
|
if (!this.form) { return; }
|
|
const form = this.form;
|
|
|
|
for (const field in this.formErrors) {
|
|
// clear previous error message (if any)
|
|
this.formErrors[field] = '';
|
|
const control = form.get(field);
|
|
|
|
if (control && control.dirty && !control.valid) {
|
|
const messages = this.validationMessages[field];
|
|
for (const key in control.errors) {
|
|
this.formErrors[field] += messages[key] + ' ';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
formErrors = {
|
|
'name': '',
|
|
'power': ''
|
|
};
|
|
|
|
validationMessages = {
|
|
'name': {
|
|
'required': 'Name is required.',
|
|
'minlength': 'Name must be at least 4 characters long.',
|
|
'maxlength': 'Name cannot be more than 24 characters long.',
|
|
'forbiddenName': 'Someone named "Bob" cannot be a hero.'
|
|
},
|
|
'power': {
|
|
'required': 'Power is required.'
|
|
}
|
|
};
|
|
} |