각도에서의 INPUT 요소에 대한 ngModel 내 파이프 사용

각도에서의 INPUT 요소에 대한 ngModel 내 파이프 사용

HTML 입력 필드가 있습니다.

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

값의 형식을 지정하고 기존 파이프를 사용합니다.

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

다음 오류 메시지가 나타납니다.

작업 표현식에 파이프를 포함할 수 없습니다.

이 컨텍스트에서 파이프를 사용하려면 어떻게 해야 합니까?

템플리트 문에서는 템플리트 표현식 연산자(파이프, 네비게이터 저장)를 사용할 수 없습니다.

(ngModelChange)="Template statements"

(ng모델 변경)=" item.value | use MyPipeToFormatThatValue=$event"

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

템플릿 식과 마찬가지로 템플릿 문은 JavaScript와 유사한 언어를 사용합니다.템플릿 문 파서는 템플릿 표현식 파서와 다르며 특히 기본 할당(=)과 체인 표현식(; 또는 )을 모두 지원합니다.

단, 특정 JavaScript 구문은 허용되지 않습니다.

• 신규
• 증분 및 감소 연산자, ++ 및 --
• += 및 -=와 같은 연산자 할당
• 비트 연산자 | 및 &
• 템플릿 표현식 연산자

따라서 다음과 같이 작성해야 합니다.

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

플런커의 예

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

여기서의 해결책은 바인딩을 단방향 바인딩과 이벤트바인딩으로 분할하는 것입니다.이러한 구문은[(ngModel)]에워싸고마워요. []는 단방향 바인딩 구문입니다.()는 이벤트 바인딩 구문입니다.함께 사용하는 경우 -[()]Angular는 이를 속기로 인식하고 컴포넌트 오브젝트 값에 대한 단방향 바인딩 및 이벤트바인딩 형식으로 양방향 바인딩을 배선합니다.

사용할 수 없는 이유[()]파이프는 단방향 바인딩에서만 작동합니다.따라서 단방향 바인딩에서만 작동하도록 파이프를 분할하고 이벤트를 별도로 처리해야 합니다.

자세한 내용은 각도 템플릿 구문을 참조하십시오.

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

저는 수용된 답변에 한 가지 포인트를 더 추가하고 싶습니다.

입력 컨트롤의 유형이 텍스트가 아니면 파이프가 작동하지 않습니다.

명심하고 시간을 절약하세요.

위의 솔루션을 시험해 보았습니다만, 모델에 표시되는 값은 형식화된 값입니다.그 후 반환되어 currency Pipe 에러가 표시됩니다.그래서 어쩔 수 없이

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

그리고 addToAmount-> change on blur의 함수로 인해 ngModelChange에서 커서 문제가 발생하였습니다.

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

[(ngModel)]로 양방향 모델을 바인딩하는 대신 [ngModel]을 사용해야 합니다.그런 다음 수동 변경 이벤트를 (ngModelChange)와 함께 사용합니다.이것은 컴포넌트의 쌍방향 입력에 대한 공용 규칙입니다.

이벤트 이미터의 파이프가 잘못되어 있기 때문입니다.

My Solution은 아래에 제시되어 있습니다.searchDetail은 객체입니다.

<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">

양방향 바인딩으로 인해 다음 오류가 발생하지 않도록 합니다.

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

이 오류를 방지할 수 있는 더 좋은 방법이 있으면 좋겠습니다.

언급URL : https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular