Toc improvements, validator required
This commit is contained in:
parent
266c5c0767
commit
2f5b10b449
|
@ -4,4 +4,15 @@
|
|||
|
||||
.show {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.ng-valid[required], .ng-valid.required {
|
||||
border-left: 5px solid #42A948; /* green */
|
||||
}
|
||||
|
||||
.ng-invalid:not(form) {
|
||||
border-left: 5px solid #a94442; /* red */
|
||||
}
|
||||
.errorMessage{
|
||||
color:red;
|
||||
}
|
|
@ -20,37 +20,20 @@ import { GroupBase } from './dynamic-form-group/group-base';
|
|||
export class DynamicFormComponent implements OnInit {
|
||||
|
||||
@Input() dataModel: DataModel = new DataModel();
|
||||
form: FormGroup;
|
||||
|
||||
payLoad = '';
|
||||
|
||||
|
||||
|
||||
form: FormGroup;
|
||||
payLoad = '';
|
||||
|
||||
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
|
||||
this.form = this.qcs.toFormGroup(new Array(), new Array());
|
||||
}
|
||||
|
||||
|
||||
getSubForm(subformName){
|
||||
return this.form.controls[subformName];
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
|
@ -75,29 +58,6 @@ export class DynamicFormComponent implements OnInit {
|
|||
},
|
||||
(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)
|
||||
);
|
||||
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -52,9 +52,12 @@
|
|||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class= "errorMessage" *ngIf="!isValid">{{field.label}} is required</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
|
||||
|
|
|
@ -17,8 +17,8 @@ export class DynamicFormFieldComponent {
|
|||
@Input() field: FieldBase<any>;
|
||||
@Input() form: FormGroup;
|
||||
|
||||
get isValid() {
|
||||
return true; //return this.form.controls[this.field.key].valid;
|
||||
get isValid() { debugger;
|
||||
return this.form.controls[this.field.key].valid;
|
||||
}
|
||||
|
||||
public ngOnInit() { //dropdown lists take only one of the available sources
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<nav id="toc" data-toggle="toc">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item" >
|
||||
<a class="nav-link" *ngFor ="let header of headers" href="#">{{header}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body data-spy="scroll" data-target="#toc">
|
||||
<nav id="toc" data-toggle="toc">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item" >
|
||||
<a class="nav-link" *ngFor ="let group of dataModel.groups" href="#group.key">{{group.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ export class TocComponent implements OnInit{
|
|||
private headers = new Array();
|
||||
|
||||
ngOnInit(){
|
||||
var len = this.dataModel.groups.length;
|
||||
var len = this.dataModel.groups.length; // I don't use headers , I use datamodel.groupfields
|
||||
for (var i=0; i<len; i++){
|
||||
this.headers.push (this.dataModel.groups[i].title)
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@ export class LoginComponent implements OnInit{
|
|||
console.log('Name: ' + profile.getName());
|
||||
localStorage.setItem('currentUser', JSON.stringify(googleUser));
|
||||
//this.router.navigateByUrl('dynamic-form');
|
||||
this.ngZone.run(() => this.router.navigateByUrl('projects'))
|
||||
this.ngZone.run(() => this.router.navigateByUrl('projects'));
|
||||
//this.router.navigate(['/projects']);
|
||||
}
|
||||
|
||||
|
|
|
@ -45,7 +45,6 @@ export class dataModelBuilder {
|
|||
label: element.title.__cdata,
|
||||
key:element._id,
|
||||
value: element.value,
|
||||
required: true,
|
||||
order:element._ordinal,
|
||||
rules: element.visible.rule != undefined ? element.visible.rule: rule,
|
||||
visible: element._defaultVisibility,
|
||||
|
@ -62,7 +61,6 @@ export class dataModelBuilder {
|
|||
label: element.title.__cdata,
|
||||
key:element._id,
|
||||
value: element.value,
|
||||
required: true,
|
||||
order:element._ordinal,
|
||||
rules: element.visible.rule != undefined ? element.visible.rule: rule,
|
||||
visible: element._defaultVisibility,
|
||||
|
@ -78,7 +76,6 @@ export class dataModelBuilder {
|
|||
label: element.title.__cdata,
|
||||
key:element._id,
|
||||
value: true,
|
||||
required: true,
|
||||
order:element._ordinal,
|
||||
rules: element.visible.rule != undefined ? element.visible.rule: rule,
|
||||
visible: element._defaultVisibility,
|
||||
|
@ -95,7 +92,6 @@ export class dataModelBuilder {
|
|||
label: element.title.__cdata,
|
||||
key:element._id,
|
||||
value: true,
|
||||
required: true,
|
||||
order:element._ordinal,
|
||||
rules: element.visible.rule != undefined ? element.visible.rule: rule,
|
||||
visible: element._defaultVisibility,
|
||||
|
@ -219,6 +215,8 @@ export class dataModelBuilder {
|
|||
newAttribute.ordinal = attr._ordinal;
|
||||
newAttribute.sources = new Array();
|
||||
newAttribute.sources.push(attr.sources.source);
|
||||
newAttribute.validation = new Array();
|
||||
//newAttribute.validation.push(attr.validation.rule);
|
||||
|
||||
newAttribute.sources.forEach(src => {
|
||||
src.params=new Array();
|
||||
|
@ -230,11 +228,28 @@ export class dataModelBuilder {
|
|||
}
|
||||
|
||||
});
|
||||
newAttribute.validation = attr.validation;
|
||||
|
||||
if (attr.validation.rule.length)
|
||||
for (var i=0, len=attr.validation.rule.length; i<len; i++){
|
||||
let rule = new Rule();
|
||||
rule.ruleStyle= attr.validation.rule[i]._ruleStyle;
|
||||
rule.ruleType= attr.validation.rule[i]._type;
|
||||
newAttribute.validation.push(rule);
|
||||
}
|
||||
|
||||
else{
|
||||
if(attr.validation.rule){
|
||||
let rule = new Rule();
|
||||
rule.ruleStyle= attr.validation.rule._ruleStyle;
|
||||
rule.ruleType= attr.validation.rule._type;
|
||||
newAttribute.validation.push(rule);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(newAttribute);
|
||||
attribute.push(newAttribute);
|
||||
fields.find(x => x.key == newAttribute.id).attributes.sources = newAttribute.sources;
|
||||
fields.find(x => x.key == newAttribute.id).attributes.validation = newAttribute.validation;
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -16,6 +16,12 @@ export class FieldControlService {
|
|||
groups.forEach(group => {
|
||||
let subgroup: any = {};
|
||||
group.groupFields.forEach(field => {
|
||||
if(field.attributes.validation != undefined)
|
||||
field.attributes.validation.forEach(val => {
|
||||
if (val.ruleStyle.toString()=="existence"){
|
||||
field.required = true;
|
||||
}
|
||||
});
|
||||
subgroup[field.key] = field.required ? new FormControl(field.value || '', Validators.required) : new FormControl(field.value || '')
|
||||
});
|
||||
//PLEASE CHANGE THE group.key TO BE SAME AS THE ONE ON THE DYNAMIC-FORM-GROUP-COMPONENT.html
|
||||
|
|
Loading…
Reference in New Issue