입력 호스트 텍스트 및 값을 수정하기위한 각도 2 속성 지시문

Question

입력을 dd-mm-yyyy로 형식화하고 텍스트 값 및 JavaScript 날짜를 값으로 갖는 속성 지시문이 있어야합니다. rc.3에서 나는 ngFormControl.valueAccessor.writeValue()과 몇 가지 다른 방법을 사용했습니다. 이제는 NgFormControl이 릴리스 버전에서 사라진 것으로 보입니다. 지금 무엇을 사용해야합니까? 여기에 내가 전에 무엇을하고 있었는지입니다 :

<input type="text" format-date2 [ngFormControl]='formControls.dateOfMarriage'> 

import {Directive, ElementRef} from '@angular/core'; 
import {NgFormControl} from '@angular/common'; 

@Directive({ 
selector: '[format-date2]', 
host: { 
    '(input)': 'onInputChange()', 
    'placeholder': 'dd-mm-yyyy', 
}, 
}) 
export class FormatDate2 { 

viewValue; 
modelValue; 
currentValue = ''; 
el: HTMLInputElement; 

constructor(private model: NgFormControl, private elementRef: ElementRef) { 
    this.el = elementRef.nativeElement; 
} 

ngOnInit() { 
if (this.model.control.value) { 
    let d = new Date(this.model.control.value); 
    let s = this.pad(d.getDate()) + '-' + this.pad(d.getMonth() + 1) + '-' + d.getFullYear(); 
    this.model.valueAccessor.writeValue(s); 
    } 
} 

pad(n) { 
    return n < 10 ? '0' + n : n; 
} 

onInputChange() { 
    let i = this.el.selectionEnd - this.el.value.length; 
    this.format(this.el.value); 
    i = this.viewValue.length + i; 
    this.model.control.updateValue(this.modelValue); 
    this.model.valueAccessor.writeValue(this.viewValue); 
    this.el.setSelectionRange(i, i); 
    return false; 
} 

format(val) { 
// some code 
// this.modelValue = 'some value'; 
// this.viewValue = 'another value' 
} 

} 

Answer 1

• 대신 NgFormControl 클래스 사용 NgControl/@angular/forms
• 대신 [ngFormControl] 지시, [formControl]를 사용합니다.

는 또한이 반응 형태를 사용하는 당신 양식을 사용하여 구성 요소에 선언 된 어떤 모듈에 @NgModule.imports: [ ReactiveFormsModule ] 그. 확인해야, 즉 FormControl/FormGroup하지만 템플릿 양식, 그냥 FormsModule를 사용합니다. 예를 들어 반응 형 양식을 사용하는 것처럼 보입니다. 그러나 지시문은 템플릿 양식에서도 작동합니다.