반응식에서 사용되는 사용자 지정 구성 요소 MdDatePicker

Question

각도 formGroup에 사용할 사용자 지정 구성 요소를 만들려고합니다.

여기 내가이 사용자 정의 구성 요소를 사용하는 방법입니다 :

<form [formGroup]="form"> 
    ... 
    <app-date-picker formControlName="dateStart" 
        [isConsultation]="isConsultation" 
        [label]="'Du'" 
        [(ngModel)]="agenda.datDeb"> 
    </app-date-picker> 
    ... 
</form> 

문제가 : 주요 구성 요소 (이 양식을 포함)에서 모델이 업데이트되지 않을 때 내 사용자 지정 구성 요소의 값이 변경, MdDatePicker가 관련되어 있습니다. 비록 내가 ControlValueAccessor를 사용하고 있지만.

내 손님 구성 요소의 HTML 템플릿 : 내 구성 요소의 타이프 스크립트 코드를 읽을 수 있습니다 후

<div class=""> 
    <span *ngIf="label">{{label}} :</span> 
    <md-form-field class="" [ngClass]="isConsultation ? 'no-icon' : 'container-input-date'"> 
     <input mdInput 
      [mdDatepicker]="pickerDebut" 
      class="consultation" 
      [(ngModel)]="theDate"> 
     <md-datepicker-toggle mdSuffix [for]="pickerDebut"></md-datepicker-toggle> 
     <md-datepicker #pickerDebut></md-datepicker> 
    </md-form-field> 
</div> 

그리고 여기 :

import {Component, Input, ViewChild, forwardRef} from '@angular/core'; 
import { 
    NgModel, 
    ControlValueAccessor, 
    NG_VALUE_ACCESSOR, 
    NG_VALIDATORS, 
    FormControl, 
} from "@angular/forms"; 

export function validateDateInputFormat(c: FormControl) { 
    // Error content in case input date format is not valid 
    let err = { 
     formatError: { 
      given: c.value, 
      acceptedFormat: 'dd/MM/yyyy' 
     } 
    }; 

console.log('VALIDATE => c : ', c); 

// Control logiq 
// return c.value == null ? null : (String(c.value).match(date_regexp)) ? null : err; 
return null; 
} 

@Component({ 
    selector: 'app-date-picker', 
    templateUrl: './date-picker.component.html', 
    styleUrls: ['./date-picker.component.scss'], 
    providers: [ 
     { 
      provide: NG_VALUE_ACCESSOR, 
      useExisting: forwardRef(() => DatePickerComponent), 
      multi: true 
     }, 
     { 
      provide: NG_VALIDATORS, 
      useValue: validateDateInputFormat, 
      multi: true 
     } 
    ] 
}) 
export class DatePickerComponent implements ControlValueAccessor { 

    @Input() 
    label : string; 
    @Input() 
    isConsultation : boolean; 

    @ViewChild(NgModel) _theDate: NgModel; 

    constructor() { } 

    propagateChange = (_: any) => {}; 
    onTouched: any =() => { }; 

    writeValue(obj: any): void { 
     console.log('writeValue => obj : ', obj); 
     if (obj) { 
      this._theDate = obj; 
     } 
    } 

    registerOnChange(fn: any): void { 
     this.onChange = fn; 
     console.log('registerOnChange => fn : ', fn); 
    } 

    registerOnTouched(fn: any): void { 
     this.onTouched = fn; 
     console.log('registerOnTouched => fn : ', fn); 
    } 

    onChange(event){ 
     console.log('onChange(event) - event => ', event); 
     this.propagateChange(event.target.value); 
    } 

    get theDate() { 
     console.log('get theDate()'); 
     return this._theDate; 
    } 

    set theDate(val) { 
     console.log('set theDate(val) - val => ', val); 
     this._theDate = val; 
     this.propagateChange(val); 
    } 
} 

은 내가 잘못 여기서 뭐하는 거지?

Answer 1

나는 이것을 극복 할 수 있었다.

여기가 답입니다.

1 문제 :

@ViewChild(NgModel) _theDate: NgModel; 

내가

private _theDate : string; 

2 문제로 변환 : 은 onchange를 메도는 쓸모가 없다. 내 구성 요소의 피날레 TS 코드를 제거했습니다.

import {Component, Input, ViewChild, forwardRef} from '@angular/core'; 
import { 
    NgModel, 
    ControlValueAccessor, 
    NG_VALUE_ACCESSOR, 
    NG_VALIDATORS, 
    FormControl, 
} from "@angular/forms"; 

export function validateDateInputFormat(c: FormControl) { 
    // Error content in case input date format is not valid 
    let err = { 
     formatError: { 
      given: c.value, 
      acceptedFormat: 'dd/MM/yyyy' 
     } 
    }; 

console.log('VALIDATE => c : ', c); 

// Control logiq 
// return c.value == null ? null : (String(c.value).match(date_regexp)) ? null : err; 
return null; 
} 

@Component({ 
    selector: 'app-date-picker', 
    templateUrl: './date-picker.component.html', 
    styleUrls: ['./date-picker.component.scss'], 
    providers: [ 
     { 
      provide: NG_VALUE_ACCESSOR, 
      useExisting: forwardRef(() => DatePickerComponent), 
      multi: true 
     }, 
     { 
      provide: NG_VALIDATORS, 
      useValue: validateDateInputFormat, 
      multi: true 
     } 
    ] 
}) 
export class DatePickerComponent implements ControlValueAccessor { 

    @Input() 
    label : string; 
    @Input() 
    isConsultation : boolean; 

    private _theDate: string; 

    constructor() { } 

    propagateChange = (_: any) => {}; 
    onTouched: any =() => { }; 

    writeValue(obj: any): void { 
     console.log('writeValue => obj : ', obj); 
     if (obj) { 
      this._theDate = obj; 
     } 
    } 

    registerOnChange(fn: any): void { 
     this.propagateChange= fn; 
     console.log('registerOnChange => fn : ', fn); 
    } 

    registerOnTouched(fn: any): void { 
     this.onTouched = fn; 
     console.log('registerOnTouched => fn : ', fn); 
    } 

    get theDate() { 
     console.log('get theDate()'); 
     return this._theDate; 
    } 

    set theDate(val) { 
     console.log('set theDate(val) - val => ', val); 
     this._theDate = val; 
     this.propagateChange(val); 
    } 
}