ইনপুটটির ফোকাস পরিবর্তিত হওয়ার পরে পরিবর্তনের ইভেন্টটি ডাকা হয়। আমি কীভাবে এটি তৈরি করতে পারি যাতে ইভেন্টটি প্রতিটি কীপ্রেসে আগুন লাগে?
<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)]তার দুই টুকরা, অর্থাত, সম্পত্তি databinding এবং ইভেন্ট বাঁধাই মধ্যে শব্দবিন্যাস:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}এটি ব্যাকস্পেস কীটির জন্যও কাজ করে।
আসুন দেখুন কেন:
keyupনিশ্চিত যে নিরাপদ বিকল্পগুলির মধ্যে একটি তবে inputঘটনাটি এক ধাপ এগিয়ে keyup। keyupভিন্ন input, পাঠ্যবক্সের মান অন্য কোনও উপায়ে যেমন বাইন্ডিং দ্বারা পরিবর্তিত হয় তা কাজ করে না।
(change)পাশাপাশি কিছুকে সম্বোধন করতে পারে । গৃহীত উত্তর পুরোপুরি চুষে!
(ngModelChange)?
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}keydownবা keyupপরিবর্তে চাইবেন । কিছু কী কেবল আগুন দেয় না keypress। আরও দেখুন stackoverflow.com/questions/4843472/...
এই ধরণের কেসগুলি হ্যান্ডেল করার একটি ভিন্ন উপায় হ'ল ফর্মট্রোলটি ব্যবহার করা এবং এটির সাবস্ক্রাইব করা valueChangesযখন আপনার উপাদানটি আরম্ভ করা হয়, যা আপনাকে HTX অনুরোধগুলি সম্পাদন করার মতো উন্নত প্রয়োজনীয়তার জন্য rxjs অপারেটর ব্যবহার করার অনুমতি দেয় , ব্যবহারকারী একটি বাক্য লেখার সমাপ্ত না হওয়া পর্যন্ত একটি ডেবিউন প্রয়োগ করে, সর্বশেষ মান গ্রহণ করে এবং পূর্ববর্তী বাদ দিন, ...
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);
});
}
}FormGroup
কৌনিক এনজিএমডেল সিঙ্ক্রোনাস রাখে এমন গোপন ইভেন্টটি ইভেন্ট কল ইনপুট । সুতরাং আপনার প্রশ্নের সর্বোত্তম উত্তরটি হ'ল:
<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"
প্রতিক্রিয়াশীল ফর্মগুলির জন্য, আপনি সমস্ত ক্ষেত্রে বা কেবল একটি নির্দিষ্ট ক্ষেত্রে করা পরিবর্তনগুলিতে সাবস্ক্রাইব করতে পারেন।
একটি ফর্মগ্রুপের সমস্ত পরিবর্তন পান:
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"
প্রাথমিক পরীক্ষাগুলি সূক্ষ্মভাবে কাজ করে তা নির্দেশ করে, আরও পরীক্ষার পরে যদি কোনও বাগ খুঁজে পাওয়া যায় তবে তা আবার পোস্ট করবে।