Как считать данные из template Angular 2

У меня есть следующий компонент

@Component({
      selector: 'fill-in-blank',
      template: `
        <form #f="ngForm" (ngSubmit)="onSubmit(f)">
        <ng-container *ngFor="let text of texts; let i = index">
          {{text}}<input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel #prix="ngModel" [id]="i" (ngModelChange)="onValueChange()">
        </ng-container>
        </form>
        <pre>{{f.value | json}}</pre>
      `
    })

Я хочу использовать данные из f.value в компоненте, я попыталась через

@ViewChild('f') f: ElementRef;

сделать переменную f доступной, но когда пытаюсь вызвать функцию

  check() {
    alert(this.f);
  }

Ничего не получается... Также я попробовала

alert(this.f[Object.keys(this.f)[0]]);
alert(this.f[0]);

Как можно отобразить первое значение из f?

Полный код

import { Component, EventEmitter, OnInit, Input, Output, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'fill-in-blank',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
    <ng-container *ngFor="let text of texts; let i = index">
      {{text}}<input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel  [id]="i" (ngModelChange)="onValueChange(f,i)">
    </ng-container>
    </form>
    <pre>{{f.value | json}}</pre>
    <button (click)="check">OKKO</button>
  `
})
export class FillInBlankComponent implements OnInit {
  @ViewChild('f') f: ElementRef;
  @Input() textline: string;
  @Input() fields: string[];
  @Output() valueChanged = new EventEmitter();
  texts: string[];
  value: string[] = [];
  constructor() {
  }

  ngOnInit() {
    let regex = null;
    if (this.fields && this.fields.length > 0) {
      regex = new RegExp(this.fields.join("|"), 'gi');
    }
    this.texts = this.textline.split(regex);
  }
  onValueChange() {
   this.valueChanged.emit(this.f);
  }
  ngAfterViewInit() {
  // this.f.nativeElement.value.style.color = 'red';
  }
  check() {
    alert(this.f);
  }
}

Компонент используется в следующем компоненте

import { Component, OnInit, ViewChildren} from '@angular/core';
import { DataService } from '../sample02-simpleService/data.service';
@Component({
  moduleId: module.id,
  selector: 'part2',
  template: `    
    <fill-in-blank [textline]="itemsSource" [fields]="abc" (valueChanged)="printValue($event)"></fill-in-blank>
    <p>{{values}}</p>
<p>{{itemsSource}}</p>
    <p>{{abc}}</p>
    <button (click)="check()">Ok</button>
    <input/>
  `,
  // styleUrls: ['app/part1/part1.component.css'],
  providers: [DataService]
})
// @Pipe({name: 'replacer'})
export class Part2Component implements OnInit {
 // @ViewChildren ('prix') inputs;
  public itemsSource: string;
  public abc: string[];
   public values: string[];
  // values = '';
  constructor(public dataService: DataService) {
  }
  ngOnInit() {
    this.abc = this.dataService.getData3();
    this.itemsSource = this.dataService.getData2();
  }
  printValue($event: any) {
  }
}