কৌণিকের ইনপুট উপাদানগুলিতে ngModel এর মধ্যে পাইপ ব্যবহার করা

144

আমি একটি HTML ইনপুট ক্ষেত্র করেছি field

<input 
    [(ngModel)]="item.value" 
    name="inputField" 
    type="text" 
/>

এবং আমি এর মানটি ফর্ম্যাট করতে এবং একটি বিদ্যমান পাইপ ব্যবহার করতে চাই:

.... 
[(ngModel)]="item.value | useMyPipeToFormatThatValue" 
....

এবং ত্রুটি বার্তা পান:

অ্যাকশন এক্সপ্রেশনটিতে পাইপ থাকতে পারে না

আমি কীভাবে এই প্রসঙ্গে পাইপ ব্যবহার করতে পারি?

— একাকী
সূত্র

214

আপনি টেম্পলেট বিবৃতিতে টেমপ্লেট এক্সপ্রেশন অপারেটরগুলি (পাইপ, সেভ নেভিগেটর) ব্যবহার করতে পারবেন না :

(ngModelChange)="Template statements"

~~(ngModelChange) = "আইটেম.ভ্যালু | ব্যবহারমাইপাইপটোফোর্ম্যাট্যাটভ্যালু = $ ইভেন্ট"~~

https://angular.io/guide/template-syntax#template-statements

টেম্পলেট এক্সপ্রেশনগুলির মতো, টেমপ্লেট স্টেটমেন্টগুলি জাভা স্ক্রিপ্টের মতো দেখতে এমন একটি ভাষা ব্যবহার করে। টেমপ্লেট বিবৃতি পার্সার টেম্পলেট এক্সপ্রেশন পার্সার থেকে পৃথক এবং বিশেষত উভয় বেসিক অ্যাসাইনমেন্ট (=) এবং চেইনিং এক্সপ্রেশন (সহ; বা,) উভয় সমর্থন করে।

তবে নির্দিষ্ট কিছু জাভাস্ক্রিপ্ট সিনট্যাক্স অনুমোদিত নয় :

নতুন

বৃদ্ধি এবং হ্রাস অপারেটর, ++ এবং -

অপারেটর অ্যাসাইনমেন্ট, যেমন + = এবং - =

বিটওয়াইস অপারেটর | এবং &

টেমপ্লেট এক্সপ্রেশন অপারেটরগুলি

সুতরাং আপনার নিম্নলিখিত হিসাবে এটি লিখতে হবে:

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

Plunker উদাহরণ

— yurzui
সূত্র

3

কেউ ব্যাখ্যা করতে পারেন কেন এটিকে এভাবে বিভক্ত করতে হবে? আমি টাইপ তারিখের সাথে একটি ইনপুটটিতে একটি তারিখ বাঁধতে চেষ্টা করছি: [(এনজিএমডেল)] = "মডেল.এন্ড তারিখ | তারিখ: 'ওয়াই-এমএম-ডিডি'" এবং পাইপটি কাজ করবে না। তবে, আমি যদি কলা বাক্যবিন্যাসটি বন্ধ করে দিই এবং উপরে বিভক্ত বাক্য গঠনটি ব্যবহার করি তবে তা ঠিক কাজ করে।

— ব্লেক রিভেল

এটি কি সত্যিই কাজ করেছিল? এটা আমার জন্য কাজ করে না। এটিতে বলা হয়েছে যে অ্যাকশন এক্সপ্রেশনটিতে পাইপ থাকতে পারে না

— NoStressDeveloper

4

এটি আমার পক্ষে কাজ করেছে! @ ব্ল্যাকরিভেল "[]" লক্ষ্যটিকে দেখার জন্য ডাটা উত্স থেকে সম্পত্তিটিকে একমুখী করে দেয় তবে আপনি কীভাবে এটি পাইপের সাহায্যে প্রদর্শিত হবে তা পরিবর্তন করতে পারবেন। "()" বাইন্ডিং ব্যবহার করার সময় এটি ফর্ম্যাট পরিবর্তন করার অন্য উপায় এখানে অকেজো হবে। সুতরাং আমি অনুমান করি যে কলাটি একটি বাক্সে কেন "[()]" পাইপের সাহায্যে কাজ করে না এবং এগুলি বিভক্ত করার উপায় way আপনি এটি সম্পর্কে এখানে আরও পড়তে পারেন: কৌণিক.ই.ও.

— মাইক

8

সাবধান থাকুন যে উদাহরণে পাইপটি কেবল এক দিকে কাজ করে। ধরা যাক item.valueএকটি সংখ্যা, এবং আপনি DatePipeএটি একটি তারিখের স্ট্রিংয়ে রূপান্তর করতে ব্যবহার করেন। তারিখটি সম্পাদনা করা হলে, এটি $eventএকটি তারিখের স্ট্রিংও হবে এবং এটির পিছনে ফিট হবে না item.valueপাইপটি আপনার (ngModelChange)অভিব্যক্তিতে যা করেছে তা বিপরীত করতে হবে - অর্থাত্ তারিখের স্ট্রিংটিকে কোনও সংখ্যায় ফিরিয়ে দিন।

— টুপার্টুনট

3

@ নায়ক (ngModelChange)="updateItemValue($event)", তারপরে একটি updateItemValue(date: string)পদ্ধতি তৈরি করুন এবং এর ভিতরে item.value = someConversionFunction(date); এখন আপনি যদি রূপান্তর ফাংশন হিসাবে আপনার কী ব্যবহার করা উচিত তা জিজ্ঞাসা করছেন, আমি জানি না। হয়তো Date.parse()কাজ করতে পারে ।

— টিউপার্টুনট

111

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

এখানে সমাধানটি হ'ল বাঁধাইকে এক-উপায় বাঁধাই এবং ইভেন্টের বাইন্ডিংয়ে বিভক্ত করা - যা সিনট্যাক্সটি [(ngModel)]আসলে অন্তর্ভুক্ত করে। []একমুখী বাঁধাই সিনট্যাক্স এবং ()ইভেন্ট বাঁধাই সিনট্যাক্স হয়। যখন একসাথে ব্যবহার করা হয় -[()] কৌণিক এটিকে শর্টহ্যান্ড হিসাবে স্বীকৃতি দেয় এবং একমুখী বাঁধার আকারে একটি দ্বিমুখী বাঁধাই এবং কোনও উপাদান বস্তুর মানকে একটি ইভেন্টকে বাধ্যতামূলক করে ires

যে কারণে আপনি ব্যবহার করতে পারবেন না [()] পাইপের সাহায্যে হ'ল পাইপগুলি কেবল একমুখী বাইন্ডিং দিয়ে কাজ করে। সুতরাং আপনাকে কেবলমাত্র একমুখী বাঁধাইয়ের কাজ করতে এবং ইভেন্টটি পৃথকভাবে পরিচালনা করতে আপনাকে পাইপটি বিভক্ত করতে হবে।

আরও তথ্যের জন্য কৌণিক টেম্পলেট সিনট্যাক্স দেখুন।

— KnowHoper
সূত্র

1

আমি কীভাবে শর্তটি প্রকাশ করব | সংখ্যা: '3.2-5'?

— নায়িকা

14

<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

আমি গৃহীত উত্তরে আরও একটি পয়েন্ট যুক্ত করতে চাই।

আপনার ইনপুট নিয়ন্ত্রণের ধরণটি পাঠ্য না থাকলে পাইপটি কাজ করবে না।

এটি মনে রাখবেন এবং আপনার সময় বাঁচান।

— তিবিন টমাস
সূত্র

দয়া করে আপনার উত্তরে আরও তথ্য যুক্ত করার বিষয়ে বিবেচনা করুন

— ইন্দার

1

এনজিএক্স-লোকেল-মাস্ক কৌণিক গ্রন্থাগারটি পরীক্ষা করুন যা আমি

— কৌণীয়

6

আমি উপরের সমাধানগুলি চেষ্টা করেছি তবুও যে মানটি মডেলটিতে যায় সেটি হ'ল ফর্ম্যাট মান হ'ল তারপরে ফিরে এসে আমাকে মুদ্রা পাইপের ত্রুটি দেয়। সুতরাং আমি ছিল

  [ngModel]="transfer.amount | currency:'USD':true"
                                   (blur)="addToAmount($event.target.value)"
                                   (keypress)="validateOnlyNumbers($event)"

এবং অ্যাডটোঅ্যামাউন্টের ক্রিয়াকলাপে -> অস্পষ্টতার কারণে পরিবর্তন এনজিএমডেল চ্যাঞ্জ আমাকে কার্সার সমস্যা দিচ্ছিল।

removeCurrencyPipeFormat(formatedNumber){
    return formatedNumber.replace(/[$,]/g,"")
  }

এবং অন্যান্য অ-সংখ্যাসূচক মান মুছে ফেলা হচ্ছে।

validateOnlyNumbers(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }

— cabaji99
সূত্র

আমরা শতকরা পাইপের জন্য নির্বাচিত উত্তরও চেষ্টা করেছি এবং (এনজিএমডেল চ্যাঞ্জ) জন্য ডেসিমাল () এর মতো একটি পদ্ধতি লিখেছিলাম এবং 2 টি পদ্ধতি একে অপরকে তাড়া করে। সুতরাং আপনি 1 ডিজিটের বেশি টাইপ করতে পারবেন না। আশ্চর্যজনক যে এটি এতটা উপচে পড়েছে

— অ্যাঞ্জেলা পি

1

আমার সমাধানটি এখানে নীচে দেওয়া হয়েছে অনুসন্ধানের বিবরণ একটি অবজেক্ট ..

<p-calendar  [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'"  (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar>

<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json"  (ngModelChange)="searchDetail.systems=$event" required='true' name="systems"
            placeholder="Enter the Systems">

— ভাস্কর দ্য নেভিগেটর
সূত্র

0

আপনার অবশ্যই [(এনজিমোডেল)] এর সাথে দ্বিমুখী মডেল বাইন্ডিংয়ের পরিবর্তে [এনজিমোডেল] ব্যবহার করতে হবে। তারপরে (ngModelChange) সহ ম্যানুয়াল পরিবর্তন ইভেন্টটি ব্যবহার করুন। উপাদানগুলিতে সমস্ত দ্বিমুখী ইনপুটগুলির জন্য এটি সর্বজনীন নিয়ম।

কারণ ইভেন্ট ইমিটারে পাইপটি ভুল।

— হামিদ_রেজা হোবাব
সূত্র

0

দ্বিমুখী বাইন্ডিংয়ের কারণে, এর ত্রুটি রোধ করতে:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

আপনি এই জাতীয় মডেল পরিবর্তন করতে একটি ফাংশন কল করতে পারেন:

<input [ngModel]="item.value" 
  (ngModelChange)="getNewValue($event)" name="inputField" type="text" />


import { UseMyPipeToFormatThatValuePipe } from './path';

constructor({
    private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})

getNewValue(ev: any): any {
    item.value= this.useMyPipeToFormatThatValue.transform(ev);
}

এই ত্রুটি প্রতিরোধের আরও ভাল সমাধান যদি হয় তবে ভাল হবে।

— মোহাম্মদ রেজা মি
সূত্র