import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service'; import { Component, Input, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms' @Component({ selector: 'progress-bar', templateUrl: './progress-bar.component.html', }) export class ProgressBarComponent implements OnInit { @Input() formGroup: FormGroup constructor(private visibilityRulesService: VisibilityRulesService) { } private value: number; ngOnInit() { this.formGroup .valueChanges .subscribe(control => { this.value = (this.countFormControlsWithValue(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100 }) } 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 = (control); for (let i = 0; i < formArray.length; i++) { value += this.countFormControlsWithValue(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 = (control); for (let i = 0; i < formArray.length; i++) { value += this.getFormControlDepthLength(formArray.get("" + i)) } } else if (key === "value" && this.visibilityRulesService.isElementVisible(null, form.controls["id"].value)) value++; }); return value; } }