Form validation on non form field angular2 - angular2-forms

Question

im quite new with angular2, but i seem to manage ok for a beginner. However, i'm stuck on some validation issues. i want to validate a component that is not a form field (e.g. input, select e.t.c).
I'm using a bootstrap dropdown which uses an unsorted list.
dropdownButtons.html
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default" dropdownToggle >
{{ selected ? selected : 'Type...'}}
</button>
<ul class="dropdown-menu" dropdownMenu>
<li *ngFor="let value of values;let i = index" (click)="onChange(value)">
{{value.label}}
</li>
</ul>
</div>
dropdownButtons.component.ts
import {Component, EventEmitter, Output, Input, Injectable} from '#angular/core';
import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'dropdown-buttons',
template: require('./dropdownButtons.html'),
directives: [DROPDOWN_DIRECTIVES]
})
#Injectable()
export class DropdownButtons {
#Input()
values: DropdownValue[] = [{ "value": "RSS", "label": "RSS" },{ "value": "REST", "label": "REST" }];
#Input()
selected : string;
#Output()
select: EventEmitter<DropdownValue>;
constructor() {
this.select = new EventEmitter();
}
onChange(type) {
this.select.emit(type);
}
}
export class DropdownValue {
value:string;
label:string;
constructor(value:string,label:string) {
this.value = value;
this.label = label;
}
}
My form looks like this.
<form (ngSubmit)="onSubmit()" #refererform="ngForm">
<div class="form-group">
<label for="inputUrl">Url</label>
<input type="text" class="form-control" id="inputUrl" placeholder="Url" required
[(ngModel)]="model.url" name="url">
</div>
<div class="form-group">
<dropdown-buttons [(selected)]="model.type" (select)="onSelect($event)" ></dropdown-buttons>
</div>
<div class="form-group" ng-show="showDetails" *ngIf="isShown()">
<label for="header">Header</label>
<textarea placeholder="Default Input" class="form-control" id="header"
[(ngModel)]="model.header" name="header"></textarea>
</div>
<div class="form-group" ng-show="showDetails" *ngIf="isShown()">
<label for="payload">Payload</label>
<textarea placeholder="Default Input" class="form-control" id="payload"
[(ngModel)]="model.payload" name="payload"></textarea>
</div>
<button type="submit" class="btn btn-danger" >Submit</button>
</form>
I tried to use ngModel (using required in the tags) and the FormGroup option, where i define some formcontrols. It works fine with form controls, but i can't seem to figure out how i validate non form components, is it even possible?
thanks in advance.