เหตุการณ์การเปลี่ยนแปลงจะถูกเรียกเฉพาะหลังจากที่โฟกัสของอินพุตมีการเปลี่ยนแปลง ฉันจะทำให้เหตุการณ์นั้นเกิดขึ้นในทุกการกดปุ่มได้อย่างไร

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}

การโยงครั้งที่สองจะเปลี่ยนในทุก ๆ การกดปุ่ม

ฉันใช้อินพุตเหตุการณ์และทำงานได้ดีดังต่อไปนี้:

ในไฟล์. html:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

ในไฟล์. ts:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}

ใช้ngModelChangeโดยการแบ่ง[(x)]ไวยากรณ์ออกเป็นสองส่วนคือการรวบรวมข้อมูลและการโยงเหตุการณ์:

<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

มันใช้งานได้กับปุ่ม Backspace เช่นกัน

เหตุการณ์ (keyup) เป็นทางออกที่ดีที่สุดของคุณ

มาดูกันว่าทำไม:

1. (เปลี่ยน)เช่นเดียวกับที่คุณกล่าวถึงทริกเกอร์เฉพาะเมื่ออินพุตสูญเสียโฟกัสจึงมีการใช้งาน จำกัด
2. (keypress)ก่อให้เกิดการกดปุ่ม แต่ไม่ได้เรียกการกดแป้นบางอย่างเช่น backspace
3. (keydown)ทริกเกอร์ทุกครั้งที่กดคีย์ ดังนั้นมักจะล่าช้าโดย 1 ตัวอักษร; ตามที่ได้รับสถานะองค์ประกอบก่อนการกดแป้นพิมพ์ลงทะเบียน
4. (keyup)เป็นทางออกที่ดีที่สุดของคุณเป็นมันเป็นต้นเหตุของเวลาเหตุการณ์ผลักดันที่สำคัญได้เสร็จสิ้นทุกดังนั้นนี้ยังรวมถึงตัวละครล่าสุด

ดังนั้น (keyup) เป็นสิ่งที่ปลอดภัยที่สุดที่จะไปด้วยเพราะมัน ...

• ลงทะเบียนเหตุการณ์ในทุกการกดแป้นไม่เหมือนเหตุการณ์ (เปลี่ยน)
• รวมถึงปุ่มที่ (ปุ่มกด) ถูกละเว้น
• ไม่มีความล่าช้าซึ่งแตกต่างจากเหตุการณ์ (keydown)

<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}

วิธีที่แตกต่างในการจัดการกรณีดังกล่าวคือการใช้formControlและสมัครสมาชิกvalueChangesเมื่อองค์ประกอบของคุณเริ่มต้นซึ่งจะช่วยให้คุณใช้ตัวดำเนินการrxjsสำหรับความต้องการขั้นสูงเช่นดำเนินการตามคำขอ HTTP ใช้การ debounce จนกว่าผู้ใช้จะเขียนประโยคเสร็จ และละเว้นก่อนหน้า ...

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

เหตุการณ์ความลับที่ช่วยให้การซิงโครเชิงมุม ngModel เป็นโทรเหตุการณ์การป้อนข้อมูล ดังนั้นคำตอบที่ดีที่สุดสำหรับคำถามของคุณควรเป็น:

<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}

<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

เก็บถาวร. ts

myMethod(value:string){
...
...
}

สิ่งที่คุณกำลังมองหาคือ

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

จากนั้นทำสิ่งที่คุณต้องการด้วยข้อมูลโดยเข้าถึงขอบเขตthis.mymodelในไฟล์. ts ของคุณ

ในกรณีของฉันการแก้ปัญหาคือ:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

สำหรับฟอร์มที่มีปฏิกิริยาคุณสามารถสมัครสมาชิกการเปลี่ยนแปลงที่ทำกับทุกฟิลด์หรือเฉพาะฟิลด์ที่ต้องการ

รับการเปลี่ยนแปลงทั้งหมดของ FormGroup:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

รับการเปลี่ยนแปลงของฟิลด์ที่ระบุ:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

ฉันใช้คีย์อัปในฟิลด์ตัวเลข แต่วันนี้ฉันสังเกตเห็นในโครเมี่ยมอินพุตมีปุ่มขึ้น / ลงเพื่อเพิ่ม / ลดค่าที่ไม่รู้จักโดยการกดปุ่ม

โซลูชันของฉันคือการใช้คีย์อัปและเปลี่ยนแปลงร่วมกัน:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

การทดสอบเริ่มต้นบ่งบอกว่าใช้งานได้ดีจะโพสต์กลับหากพบข้อบกพร่องใด ๆ หลังจากการทดสอบเพิ่มเติม