argos/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts

import { Field } from '../../models/Field';
import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy, OnChanges, OnDestroy } from '@angular/core';
import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
import { Subscription } from 'rxjs';


@Component({
	selector: 'app-df-field',
	templateUrl: './dynamic-form-field.component.html',
	// styles: ['.checkBoxLabelCustom {font-weight: 700;}']
	styleUrls: [
		'./dynamic-form-field.component.css'
	],
	encapsulation: ViewEncapsulation.None
})

export class DynamicFormFieldComponent implements OnInit, OnChanges, OnDestroy {
	@Input() field: Field;
	form: FormGroup;
	@Input() pathName: string;
	@Input() path: string;
	change: Subscription;
	trackByFn = (index, item) => item ? item['id'] : null;
	constructor(private route: ActivatedRoute, public visibilityRulesService: VisibilityRulesService) {

	}

	ngOnInit() {
		if (this.field) {
			this.form = this.visibilityRulesService.getFormGroup(this.field.id);
			this.change = this.form.get('value').valueChanges.subscribe(item => {
				this.visibilityRulesService.updateValueAndVisibility(this.field.id);
			});
		}
	}

	ngOnChanges(changeRecord) {

	}

	ngOnDestroy(): void {
		//Called once, before the instance is destroyed.
		//Add 'implements OnDestroy' to the class.
		if (this.change) { this.change.unsubscribe(); }
	}

	clearInput() {
	}

	get isValid() {
		return this.form.get('value').valid;
	}
	get isValidRequired() {
		return this.form.get('value').hasError('required');
	}
	get isValidPattern() {
		return this.form.get('value').hasError('pattern');
	}
	get isValidCustom() {
		return this.form.get('value').hasError('forbiddenName');
	}
}