argos/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts

import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { ViewEncapsulation } from '@angular/core';

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'
@Component({
    selector: 'progress-bar',
	templateUrl: './progress-bar.component.html',
	styles: ['.alwaysVisible .ui-progressbar-label { display:block!important; }'],
	encapsulation: ViewEncapsulation.None
})
export class ProgressBarComponent implements OnInit {
    @Input() formGroup: FormGroup
    @Input("progressValueAccuracy") public accuracy: number = 1;
    determinateProgressValue:number;

    constructor(private visibilityRulesService: VisibilityRulesService) { }

    private value: number = 0;
    ngOnInit() {
        this.calculateValueForProgressbar()
        this.formGroup
            .valueChanges
            .subscribe(control => {
                this.calculateValueForProgressbar();
            });
    }
    
    calculateValueForProgressbar(){
        var progressSoFar = this.countFormControlsWithValue(this.formGroup);
        var total = this.getFormControlDepthLength(this.formGroup);
        var perc = (progressSoFar / total) * 100;
        this.value = Number.parseFloat(perc.toPrecision(this.accuracy));
    }

    countFormControlsWithValue(form: FormGroup): number {
        let value = 0;
        Object.keys(form.controls).forEach(key => {
            let control = form.controls[key]
            if (control instanceof FormGroup) value += this.countFormControlsWithValue(control);
            else if (control instanceof FormArray) {
                let formArray = (<FormArray>control);
                for (let i = 0; i < formArray.length; i++) {
                    value += this.countFormControlsWithValue(<FormGroup>formArray.get("" + i))
                }
            }
            else if (key === "value" && control.value != null) value++;
        });
        return value;
    }

    getFormControlDepthLength(form: FormGroup): number {
        let value = 0;
        Object.keys(form.controls).forEach(key => {
            let control = form.controls[key]
            if (control instanceof FormGroup) 
               { value += this.getFormControlDepthLength(control);}
            else if (control instanceof FormArray) {
                let formArray = (<FormArray>control);
                for (let i = 0; i < formArray.length; i++) {
                    value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i))
                }
            }
            else if (key === "value" && this.visibilityRulesService.isElementVisible(null, form.controls["id"].value)) value++;
        });
        return value;
    }
}