javascript - 如何检查输入字段以防 Angular 2 中的值发生更改

Question

我有一些输入字段，我只想调用已更改的输入字段的函数。我已经阅读了关于 onChanges 的文档，但仍然不知道...所以假设我有一个函数，如果我按下按钮，如果单词被更改，它会增加 5 到计数器。

 @ViewChild('f') array_of_words: any;

check(){
 for (let i = 0; i < this.fields.length; i++) {
if ((this.array_of_words.value[i] === value[i] was changed)
this.score = this.score+5;
}

我知道，代码现在没有，但这只是获得想法的示例......我可以写什么来代替value[i] waschanged？请帮助我，我刚刚开始学习 Angular 2，非常感谢您的帮助:)

PS。我也有这个代码

  onValueChange(this.array_of_words: any, i: any) {
    this.valueChanged.emit(this.array_of_words.value[i]);
  }

也许我可以以某种方式使用它？...

我的子组件是

import { Component, EventEmitter, OnInit, Input, Output, ViewChild, ElementRef, OnChanges, SimpleChange } 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()">Give me object</button>
    <p>Score {{score}}</p>
    <button (click)="check2()">Give me object2</button>
  `
})
export class FillInBlankComponent implements OnInit, OnChanges {

  @ViewChild('f') f: any;

  @Input() textline: string;

  @Input() fields: string[];

  @Output() valueChanged = new EventEmitter();



  texts: string[];

  value: string[] = [];

  score: number = 0;
  count: number = 0;
  a:number;

  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);
  }

  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {

    if (changes['f'] && this.f) {

      //your logic work when input change
      alert("a");
    }}

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

  ngAfterViewInit() {

  }
  /*ngOnChanges(changes: any) {
    console.log(changes[this.f].currentValue);
  } */

  check() {
    if(this.count === 0) {
      for (let i = 0; i < this.fields.length; i++) {
        if (this.f.value[i] === this.fields[i]) {
          alert("OK");
          this.score += 50;

        } else {
          alert("Wrong");
        }
      }
    }
    return this.count = 1;
  }

  check2() {
    if (this.count === 1 ) {
      for (let i = 0; i < this.fields.length; i++) {
        if ((this.f.value[i] === this.fields[i]) ) {
          alert("OK");
          this.score += 25;

        } else {
          alert("Wrong");
        }
      }
    }



  }
}

我的父组件是

import { Component, OnInit, Input, Output } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <fill-in-blank [textline]="itemsSource" [fields]="abc" (valueChanged)="printValue($event)"></fill-in-blank>
    <p>{{values}}</p>
    <p>{{itemsSource}}</p>
    <p>{{abc}}</p>

`,
})
export class AppComponent implements OnInit {
  public itemsSource: string;
  public abc: string[];
  public values: string[];


  ngOnInit() {
    this.abc = ['orange', 'blue'];
    this.itemsSource = 'I like orange, blue, black, pink, rose, yellow, white, black';

  }
  printValue($event: any) {


}}

Answer 1

由于您正在讨论输入字段，因此您想要阅读的主题是表单。 Angular 具有非常好的内置行为，可以自动注意到表单输入的变化。

检查模板驱动的表单: https://angular.io/guide/forms

特别是这一小节: https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel