각도 4 입력 상자의 모델 값 수정

각도 4의 입력 상자 모델을 수정하여 사용자가 상자에 23을 입력하면 상자에 23 %가 표시되어야합니다.각도 4 입력 상자의 모델 값 수정

(입력) 또는 (변경)과 같은 이벤트에서 모델 값에 액세스 한 후 %을 모델 값에 추가하려고했습니다. 그러나 이것은 모델을 완전히 변경합니다. 내가 원했던 것은 각도 모델 변수가 여전히 23을 포함해야하지만 23 %를 표시해야한다는 것입니다.

이 문제를 해결할 수있는 방법이 있습니까? 어떤 제안이나 링크?

출처

2017-10-01 Saurabh Tiwari

그것은 조금 해키 방법입니다,하지만 당신은이 작업을 수행 할 수 있습니다

<input #input1 value="{{title}}%" (keydown)=setModel(input1.value)>

그리고 구성 요소 :

title = '23'; 
setModel(val) { 
    this.title = val.split('%').join(''); 
    console.log(this.title) 
};

value="{{title}}%"가 title 값을하고 마지막에 %을 추가합니다. setModel 방법을 사용하여 새 값을 설정할 수 있지만 설정하기 전에 %자를 모두 제거해야합니다 (예 : this.title = val.split('%').join('');).

출처

2017-10-01 09:30:15

, 내 입력 상자의 몇 동적 될 것 사촌 populated –

'value' 속성은 여기서'title' 값을 표시하고 title 값은'keydown' 이벤트에서 갱신됩니다. 그것은 실제로'ngModel'과 같은 일을합니다 –

구성 요소의 값 표시 방법을 변경하려는 경우 모델의 실제 값을 변경하는 대신 지시문을 사용해야합니다. 다시 말해 입력 마스크가 필요합니다. 기존 패키지 중 하나 (예 : https://github.com/text-mask/text-mask)를 사용하거나 직접 지시를 작성할 수 있습니다.

출처

2017-10-01 09:36:37

지시어를 사용하여 이것을 달성해야한다는 것을 알고 있지만 문제는 Angular 모델을 조작하는 방법입니다. AngularJS에서 ngModelCtrl과 같은 대안이 있습니까 –

반응 형 양식 API를 사용하면 명시 적으로 모델 객체를 생성 할 수 있습니다. formModel : 모델에 추가 할 양식 필드를 지정하는'FormGroup = new FormGroup (...); 그런 다음 모델의 특정 필드에 값을 지정할 수 있습니다 :'this.myFormModel.value.customer = "Mary";' –

두 값으로 구성 요소를 만들 수 있습니다. 하나는 바인딩 된 값이고 다른 하나는 표시된 값입니다.

@Component({ 
    selector: 'hello-world', 

    template: ` 
    <input type="text" [(ngModel)]="display" (keyup)="updateInput($event)" placeholder="Enter a name here"> 
    <hr> 
    <h1>Input: {{input}}</h1> 
` 
}) 
export class HelloWorld { 

    @Input() input = 0; 
    @Output() inputChange = new EventEmitter(); 
    display; 

    ngOnInit() { 
    this.display = `${this.input}%` 
    } 

    updateInput(evt) { 
    this.input = this.display.replace(/[^0-9.]/g, ""); 
    this.display = `${this.input}%`; 
    this.inputChange.emit(this.input); 
    } 
}

그리고 당신과 같이 구성 요소에 바인딩 할 수 있습니다 : 구성 요소는 조금 같을 것이다 나는이 그림에서 ngModel을 원하는 것이

<hello-world [(input)]="myVar"></hello-world>

출처

2017-10-01 09:39:28 user184994

각도 4 입력 상자의 모델 값 수정

답변

관련 문제