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

import { Field } from '../../models/Field';
import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy } 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: '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 {
  @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)
      if (!this.form) debugger;
      if (!this.form.get('value')) debugger;
      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");
  }
}