argos/dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.ts

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FieldSet } from 'app/models/DataSetProfile/FieldSet';
import { Field } from 'app/models/DataSetProfile/Field';
import { FormArray, FormControl } from '@angular/forms/src/model';

@Component({
  selector: 'compositefield-form',
  templateUrl: './compositefield-form.component.html',
  styleUrls: []
})

export class CompositeFieldFormComponent {
  @Input() form: FormGroup;
  @Input() dataModel: FieldSet;
  @Input() indexPath: string;
  
  isComposite: boolean = false;
  isMultiplicityEnabled: boolean = false;

  constructon() { }

  ngOnInit() {
    //this.addNewField();
    if(this.form.get("multiplicity"))
     if (this.form.get("multiplicity").value.min >1 || this.form.get("multiplicity").value.max >1 )
       this.isMultiplicityEnabled= true;
    this.isComposite = this.dataModel.fields.length > 1;
  }

  onIsCompositeChange(isComposite: boolean) {
    if (!isComposite && (<FormArray>this.form.get("fields")).length > 1) {
      for(let i = 0; i < (<FormArray>this.form.get("fields")).length - 1; i++) {
        (<FormArray>this.form.get("fields")).removeAt(1);
      }
      this.dataModel.fields.splice(1);
    }
  }

  onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
    if (!isMultiplicityEnabled) {
      (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
      (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
    }
  }

  addNewField() {
    let field: Field = new Field();
    this.dataModel.fields.push(field);
    (<FormArray>this.form.get("fields")).push(field.buildForm());
  }

  DeleteField(index) {
    this.dataModel.fields.splice(index, 1);
    (<FormArray>this.form.get("fields")).removeAt(index);
  }
}