각도 2 입력 지시문 수정 양식 제어 값

텍스트 상자의 입력 값을 수정하는 간단한 각도 2 지시문이 있습니다. Model-Driven 형식 접근 방식을 사용하고 있습니다.각도 2 입력 지시문 수정 양식 제어 값

@Directive({ 
    selector: '[appUpperCase]' 
}) 
export class UpperCaseDirective{ 

    constructor(private el: ElementRef, private control : NgControl) { 

    } 

    @HostListener('input',['$event']) onEvent($event){ 
    console.log($event); 
    let upper = this.el.nativeElement.value.toUpperCase(); 
    this.control.valueAccessor.writeValue(upper); 

    } 

}

dom이 제대로 업데이트되지만 다른 모든 키 입력 후에 모델이 업데이트됩니다. plnkr

출처

2016-11-18 Mike Lunn

나는이 일을 전에 만났고 내 머리를 긁어 버렸기 때문에이 감격 스럽다. 이 문제를 다시 방문

는

, 당신이해야 할 것은 ControlValueAccessor 명시 적으로 대신에 값을 변경합니다

this.control.control.setValue(upper);

를 호출하는 컨트롤 자체에 DOM 요소에 기록되지 않고 어디 this.control.valueAccessor.writeValue(upper)을 변경하는 것입니다 컨트롤 및 올바르게 페이지 및 컨트롤의 속성 모두에 반영됩니다. https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor-interface.html

ControlValueAccessor는 입력 제어를 나타내는 DOM 요소에 새로운 값을 기입 의 동작을 추상화한다. 여기

는 포크 plunker입니다 : http://plnkr.co/edit/rllNyE07uPhUA6UfiLkU?p=preview

출처

2016-11-18 17:51:14 silentsod

최고 :

let str:string = this.control.value; this.control.control.setValue(str.toUpperCase());

여기 갈래의 plunker입니다 :

나는에 코드를 수정! 설명 해줘서 고마워. –

문자 위치는 어떻게됩니까? 키 누르기는 문자 위치를 입력 끝으로 보냅니다. – Skyler

@silntsod 템플릿 기반 양식과 함께 사용하는 방법을 알고 있습니까? ngModel 사용 – Vishal

나는 이런 식으로 뭔가를 찾고 있었다,하지만 난 내 프로젝트에 코드를 시도 할 때 내가 (라인 this.el.nativeElement.value.toUpperCase에 오류를 얻고 있었다) @silentsod에 의해 주어진 위 작업 예제에 따라. http://plnkr.co/edit/uf6udp7mQYmnKX6hGPpR?p=preview

출처

2017-07-26 20:04:56 gocasco

각도 2 입력 지시문 수정 양식 제어 값

답변

관련 문제