অ্যাঙ্গুলার 2 এ ব্লুয়ার ইভেন্টটি কীভাবে ব্যবহার করবেন?

112

Angular2 এ আপনি কীভাবে একটি ব্লুয়ার ইভেন্ট সনাক্ত করতে পারেন? আমি এটি দিয়ে ব্যবহার করতে চাই

<input type="text">

কীভাবে এটি ব্যবহার করতে হয় কেউ আমাকে বুঝতে সাহায্য করতে পারে?

javascript angular onblur

— Ignat
সূত্র

211

(eventName)ইভেন্টটি ডিওএম-তে বাধ্য করার সময় ব্যবহার করুন , মূলত ()ইভেন্ট বাঁধার জন্য ব্যবহৃত হয়। ব্যবহার ngModelদুটি উপায় জন্য বাঁধাই পেতে myModelপরিবর্তনশীল।

মার্কআপ

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

কোড

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

ডেমো

বিকল্প (পছন্দনীয় নয়)

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

ডেমো

মডেল চালিত ফর্মটি আগুন বৈধকরণের জন্য blur, আপনি updateOnপ্যারামিটারটি পাস করতে পারেন ।

ctrl = new FormControl('', {
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
});

নকশা নথি

— পঙ্কজ পার্কার
সূত্র

2

বিকল্পটি কেন পছন্দনীয় নয়?

— স্ল্যাশ

কৌনিকটি চায় না যে আপনি HTML এর ভিতরে। ইভেন্টটি ব্যবহার করে জেএসে ফিরে যেতে পারেন। বাইন্ডিং, এনজিমোডেল এবং হোয়াট নোটের মতো সমস্ত ডিওএম অপারেশন করা উচিত।

— বার্টন

14

আপনি (ফোকাসআউট) ইভেন্টটিও ব্যবহার করতে পারেন :

(eventName)ইভেন্টটি ডিওএম-তে বাধ্য করার সময় ব্যবহার করুন , মূলত ()ইভেন্ট বাঁধার জন্য ব্যবহৃত হয়। এছাড়াও আপনি আপনার জন্য ngModelদ্বিমুখী বাইন্ডিং পেতে ব্যবহার করতে পারেন model। আপনার সাহায্যের সাহায্যে ngModelআপনার modelভেরিয়েবলের মানটি কার্যকর করা যায় component।

এইচটিএমএল ফাইলে এটি করুন

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

এবং আপনার (উপাদান) .ts ফাইলে

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}

— অনিকেত কালে
সূত্র

@ অনিকেটলে যদি আমি আপনার পদ্ধতিতে একটি সতর্কতা রাখি someMethodWithFocusOutEventতবে প্রোগ্রামটি একটি লুপের মধ্যে প্রবেশ করে সতর্কতাটি ক্ষেত্রটির ফোকাসটি হারাতে পারে, এটি সমাধান করার কোনও উপায় আছে কি?

— PS0604

6

আপনি ইনপুট ট্যাগে সরাসরি (অস্পষ্ট) ইভেন্টটি ব্যবহার করতে পারেন ।

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

এবং আপনি " ফলাফল " এ আউটপুট পাবেন

— চৌধুরীর
সূত্র

3

এইচটিএমএল

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

হিজড়া

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

— সতীশ ভিসার
সূত্র

1

/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}

— এর মরিয়ম আক্তার
সূত্র

1

এটি গিথুব রেপোতে প্রস্তাবিত উত্তর:

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

গিথুব: কীর্তি (ফর্ম): ফর্মকন্ট্রোলগুলিতে আপডেট অন-অস্পষ্ট বিকল্প যুক্ত করুন

0

(অস্পষ্ট) পরিবর্তে (ফোকাসআউট) ব্যবহার করার চেষ্টা করুন

— কেভিন ব্ল্যাক
সূত্র