Как работать с полями для ввода Angular2?

Question

[Natalia25]

Есть исходный текст, в котором определенные слова заменены полями для ввода -в моем примере слова orange, blue. Пример

Я хочу вводить слова и по нажатию на кнопку ок сделать проверку - если ввела верные слова (в первом поле orange, во втором blue), то должно отобразиться два alert сообщения, одно за другим - "Верно", если в первом ошибка, во втором верно то "Неверно", "Верно", и т.д....
Вот мой код, здесь все готово, кроме того, что я не могу подвязаться к вводимому значению, оно отображается, а достать его я не могу...подскажите, пожалуйста, что делать? Буду очень признательна за любую подсказку и помощь...
Если я правильно понимаю, то надо достать значение value из 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) {
    // $event is arrays of values
    this.values += $event;
  }
  check () {

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

  }
}

Это компонет, который был использован..

import { Component, EventEmitter, OnInit, Input, Output } 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 #prix="ngModel" [id]="i" (ngModelChange)="onValueChange()">
    </ng-container>
    </form>
    <pre>{{f.value | json}}</pre>
  
  `
})
export class FillInBlankComponent implements OnInit {

  @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.value);
  }
}

Answer 1

[ozknemoy]

вы переназначаете #prix="ngModel" в цикле и что там у вас на выходе не понятно. один из вариантов достать значение f : f.value[nameOfSomeControl] надо пробросить саму форму и имя инпута в контроллер (nameOfSomeControl). а так как имя задается по индексу(name="{{i}}") то добавяем в инпут (ngModelChange)="onValueChange(f,i)

<input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel  [id]="i" (ngModelChange)="onValueChange(f,i)">

и обработчик в контроллере
onValueChange(f.i) {
    this.valueChanged.emit(f[i]);
  }

Comments

[Natalia25]

Спасибо большое за ответ, подскажите, пожалуйста, как достать i в компоненте? с f у меня работает благодаря строке @ViewChild('f') f: ElementRef; и при использовании this

onValueChange() {
    this.valueChanged.emit(this.f[i]);
  }

[Natalia25]

То есть каким образом можно вызвать alert(первое введенное значение в поле ввода) или например (второе введенное значение)?

[Natalia25]

Сейчас при коде

onValueChange() {
   alert(this.valueChanged.emit(this.f));
  }

Мне выводится только undefined...

[ozknemoy]

сделайте как я написал выше. во вью:

<input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel  [id]="i" (ngModelChange)="onValueChange(f,i)">

то есть при смене значения инпута мы вызываем onValueChange с параметром формы и индекса
а в контроллере обрабатываем их(тут немного переделал код) :

onValueChange(f,i) {
    this.valueChanged.emit(f.value[i]);
  }

[Natalia25]

ozknemoy: Спасибо Вам огромное, все работает! :)

[Natalia25]

ozknemoy Вы не могли бы еще, пожалуйста, подсказать, если знаете, как я могу отслеживать изменения, а именно - у меня есть задача проверить вводимые данные. Если первый раз слово совпадает, то +10 баллов за каждое совпадение, неверное удаляется ( функцию написала, все работает и проверяет, правда пока не удаляет значения, еще не знаю, как это сделать), есть еще вторая попытка, то есть в оставшиеся поля ввожу значения, при нажатии на ok, функция второй раз пробегается и там уже только +5 баллов. Моя проблема в том, что надо добавить баллы только за новые слова, старые верные решения не надо учитывать...Вы не знаете, как мне это условие подключить?...Буду очень признательна за любой совет :)

[ozknemoy]

Natalia25: не могу лишить вас обучения js) можно в лоб. составлять массив строк из того что уже сопало. и пробегаюсь по массиву (лучше с помощью метода include) проверять есть ли там слово