D-Net

  selectedValSet: string;

    baseUrl: ['', Validators.required],

    selectValidationSet: [''],

    customValidationSet: ['']

  };

    super.ngOnInit();

    console.log(this.group,this.parentGroup);

    // this.getMyControl('customValidationSet').disable();

  chooseValSet(existingValSet: boolean) {

    // if(existingValSet) {

    //   this.getMyControl('selectValidationSet').enable();

    //   this.getMyControl('customValidationSet').disable();

    // }  else {

    //   this.getMyControl('selectValidationSet').disable();

    //   this.getMyControl('customValidationSet').enable();

    // }

  }

import { Component, OnInit } from '@angular/core';

@Component ({

  selector: 'app-sr-data',

  templateUrl: 'sr-data.component.html'

})

export class SrDataComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

<div class="uk-grid uk-grid-stack">

  <div class="uk-width-expand@m uk-first-column">

    <div class="uk-margin-medium-bottom">

      <h1 class="uk-article-title">Register your datasource</h1>

    </div>

    <div class="wizard">

      <div class="wizardBreadcrumbs">

        <div class="steps clearfix">

          <div class="step active">

            <div>

              Select repository

              <span></span>

            </div>

          </div>

          <div class="step">

            <div>

              Enter Information

              <span></span>

            </div>

          </div>

          <div class="step">

            <div>

              Add Interfaces

              <span></span>

            </div>

          </div>

          <div class="step">

            <div>

              Finish

              <span></span>

            </div>

          </div>

        </div>

      </div>

      <div class="content">

        <div>

          <div>

            <div class="animated fadeInRight stepContent">

              <div class="uk-alert uk-alert-danger" *ngIf="alertMessage">

                {{ alertMessage }}

              </div>

              <div class="alert alert-info">

                Please make sure your repository is registered in

                <a target="_blank" href="{{ repoSourceUrl }}">

                  <i class="fa fa-external-link" style="margin-right:3px;"></i>

                  {{ mode }}

                </a>

                . <br>

                <b>Last Updated: </b>

                <!-- WHERE WILL THIS DATE COME FROM??? -->

                2017-12-11

              </div>

              <div>

                <div class="form-group">

                  <label class="control-label">Select repository's country</label>

                  <select class="form-control" (change) ="getReposInCountry($event.target.value)" >

                    <option value="" disabled>-- none selected --</option>

                    <option *ngFor="let country of countries" value="{{ country.name }}">{{ country.name }}</option>

                  </select>

                </div>

                <div class="form-group">

                  <label class="control-label">Start typing in the name of your repository to narrow down the view</label>

                  <input [(ngModel)]="searchBox" id="search" class="form-control" type="text" />

                </div>

              </div>

              <div *ngIf="hasSelectedCountry">

                <div>

                  <h2>OpenDOAR Repositories in {{ selectedCountry }}</h2>

                </div>

                <div style="text-align: center;" *ngIf="showSpinner">

                  <span class="loading">{{ loadingMessage }}</span><br>

                  <img src="/assets/imgs/loader-big.gif">

                </div>

                <div class="uk-alert uk-alert-warning" *ngIf="noRepositories">{{ noRepositories }}</div>

                <div class="repositoriesRadioButtonForm" *ngIf="countryRepos">

                  <div class="form-group"

                       *ngFor="let repo of countryRepos | repoFilter: searchBox">

                    <label class="uk-button uk-button-link" style="display: block; text-align: left;">

                      <input type="radio" value="{{ repo.id }}" name="repositories" (change)="onChooseRepository()" [disabled]="repo.registered">

                      <span>

                        {{ repo.officialName }}

                        <span class="uk-label uk-label-warning registeredLabel" *ngIf="repo.registered">Registered</span>

                        <a target="_blank" href="{{repo.websiteUrl }}">

                          <i class="fa fa-external-link externalLink"></i>

                        </a>

                      </span>

                    </label>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <div class="wizardActions">

        <button class="btn btn-grey-light" type="button" (click)="goToNextStep()">

          Next

          <i class="fa fa-angle-double-right"></i>

        </button>

      </div>

    </div>

  </div>

  <div class="tm-sidebar uk-width-1-4@m">

    <div>

      <div class="uk-card uk-card-body uk-card-default sidemenu">

        <h3 class="el-title uk-h3 uk-heading-bullet">Info</h3>

        <p class="small">

          Use the form on the right to add your repository or journal in OpenAIRE. If you want to find more information about this process

          <!-- TARGET FILE MISSING! jsps/manuals/user-manual.pdf -->

          <a target="_blank" href="#">click here</a>

          .

        </p>

        <div class="alert alert-warning small">

          The official repository/journal administrator (his/her email address being retrieved from the OAI-PMH verb

          <b>Identify</b>

          ) will be contacted and informed about registration request. So please make sure that you are either this person or have access to the email address, or that you have notified them.

        </div>

        <p class="small">

          For any problems or questions please contact the

          <a class="external" target="_blank" href="https://www.openaire.eu/support/helpdesk" >

            OpenAIRE helpdesk

          </a>

          .

        </p>

      </div>

    </div>

  </div>

</div>

<register-datasource-shareable [mode]="'opendoar'" [repoSourceUrl]="'http://www.opendoar.org'"></register-datasource-shareable>

import { Component, Input, OnInit } from '@angular/core';

import { RepositoryService } from '../../../services/repository.service';

import {

  loadingReposMessage,

  noRepositoriesMessage,

  noRepositoryChosenMsg,

  noServiceMessage } from '../../../domain/shared-messages';

import { Country, Repository } from '../../../domain/typeScriptClasses';

@Component({

  selector: 'register-datasource-shareable',

  templateUrl: './register-datasource-shareable.component.html'

})

export class RegisterDatasourceShareableComponent implements OnInit {

  countries: Country[] = [];

  hasSelectedCountry: boolean;

  selectedCountry: string;

  countryRepos: Repository[] = [];

  noRepositories: string;

  hasSelectedRepo: boolean;

  alertMessage: string;

  showSpinner: boolean;

  loadingMessage: string = loadingReposMessage;

  @Input()

  mode: string;

  @Input()

  repoSourceUrl: string;

  constructor(private repoService:RepositoryService) {}

  ngOnInit() {

    this.getCountries();

    this.hasSelectedCountry = false;

    this.selectedCountry = '';

  }

  getCountries(){

    this.repoService.getCountries()

      .subscribe(

        countries => this.countries = countries.sort( function(a,b){

          if(a.name<b.name){

            return -1;

          } else if(a.name>b.name){

            return 1;

          } else {

            return 0;

          }

        } ),

        error => {

          this.alertMessage = noServiceMessage;

          console.log(error);

        });

  }

  getReposInCountry(country: string){

    console.log(`I got ${country} and ${this.mode}`);

    this.countryRepos = [];

    this.hasSelectedCountry = true;

    this.selectedCountry = country;

    this.showSpinner = true;

    this.repoService.getRepositoriesOfCountry(country,this.mode).subscribe(

      repos => this.countryRepos = repos,

      error => console.log(error),

      () => {

        if (!this.countryRepos.length) this.noRepositories = noRepositoriesMessage;

        this.showSpinner = false;

      }

    );

  }

  onChooseRepository(){

    this.hasSelectedRepo = true;

  }

  goToNextStep() {

    if(!this.hasSelectedRepo || this.noRepositories){

      this.alertMessage = noRepositoryChosenMsg;

    } else {

      //move to the next step

    }

  }

}

import { Component, Input, OnInit } from '@angular/core';

  constructor() {}

            <a routerLink="data" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>

                <form [formGroup]="group">

                  <!--<update-datasource-interface-form #datasourceForm [name]="'myname'" [parentGroup]="group"></update-datasource-interface-form>-->

                  <form-repeat [component]="updateDatasource" [parentGroup]="group" [description]="{label : 'ASd', desc : 'asdasd'}" [name]="'repeat'"></form-repeat>

                </form>

        <!--<p class="small">-->

          <!--Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.-->

        <!--</p>-->

        <pre>{{group.value | json}}</pre>

import { Component, OnInit, Type, ViewChild } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

import { UpdateDatasourceInterfaceFormComponent } from './update-datasource-interface-form.component';

  group: FormGroup;

  updateDatasource : Type<any> = UpdateDatasourceInterfaceFormComponent;

  constructor(private fb: FormBuilder) {

    this.group = fb.group({});

  }

  // @ViewChild('datasourceForm')

  // datasourceForm : UpdateDatasourceInterfaceFormComponent;

    // console.log("DATASOURCE",this.datasourceForm);

import { SrDataComponent } from './sources-register/sr-data.component';

import { RegisterDatasourceShareableComponent } from './sources-register/register-datasource-shareable.component';

  entryComponents : [

    UpdateDatasourceInterfaceFormComponent

  ],

    SrDataComponent,

    RepoFilter,

    RegisterDatasourceShareableComponent

<div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-width-1-1@m">

  <div [formGroup]="group">

            <input value="select" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(true)">

          <div class="uk-margin">

            <select formControlName="selectValidationSet" class="uk-select">

              <option value="noneSelected">-- none selected --</option>

            </select>

          </div>

            <input value="custom" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(false)">

          <div class="uk-margin">

            <input formControlName="customValidationSet" class="uk-input" type="text">

          </div>

</div>

import { SrDataComponent } from './sources-register/sr-data.component';

          {

            path: 'data',

            component: SrDataComponent

          }

import { Description } from '../../../domain/oa-description';

        },1000);

    <ng-template #descTemplate>{{description.desc}}</ng-template>

    <div class="uk-grid uk-form-horizontal">

        <!--<span *ngIf="description.mandatory==true && !valid"><i class="fa fa-star" style="color : red"></i></span>-->

        <!--<span *ngIf="description.recommended==true"><i class="fa fa-star" style="color : green"></i></span>-->

        {{description.label}}

        <!--<span *ngIf="params==='tooltip'"><i class="fa fa-info-circle" container="body"></i></span> uk-tooltip="{{descTemplate}}"-->

        <ng-content></ng-content>

        <div *ngIf="params==='inline'">

          <i><small>{{description.desc}}</small></i>

        </div>

    </div>

  @Input() public description: Description = null;

  @Input() public params: string = 'inline';

  @Input() public width: number = 9;

  @Input() public valid: boolean = true;

`

    `

`

`

import { InlineFormWrapper, MyGroup } from './forms/my-group.interface';

const myGroups = [

  MyGroup,

  MyArray,

  MyArrayWrapper,

  MyArrayInline,

  MyFormDirective,

  MyInlineArrayWrapper,

  InlineFormWrapper

];

  entryComponents : [

    MyArrayWrapper

  ],

    ...myGroups

    ...myGroups