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

import { Component, Input, OnChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../core/common/base/base.component';
import { Field } from '../../models/Field';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';

@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 extends BaseComponent implements OnInit, OnChanges, OnDestroy {
	@Input() field: Field;
	form: FormGroup;

	change: Subscription;
	trackByFn = (index, item) => item ? item['id'] : null;

	constructor(
		private route: ActivatedRoute,
		public visibilityRulesService: VisibilityRulesService
	) {
		super();
	}

	ngOnInit() {
		if (this.field) {
			this.form = this.visibilityRulesService.getFormGroup(this.field.id);
			this.change = this.form.get('value').valueChanges
				.pipe(takeUntil(this._destroyed))
				.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');
	}
}