角2 - カスタムフォームコントロール - 無効

Question

input[type=text]とdatepickerで構成されるControlValueAccessorを使用してカスタムコントロールを作成しました。

テンプレートドリブンフォームで使用すると、すべて正常に動作します。 しかし、モデル駆動型アプローチ（反応型）を使用すると、フォームコントロール上のdisable()メソッドは何の効果もないようです。

は、それは私がモデル駆動型フォーム内の他のすべてのフォームコントロール私は角度V2を使用していることに注意しなければならない

EDIT

と同じように私のカスタムコントロールをプログラムで有効/無効にすることが可能です。 1.0であり、私の方法論はthisとほぼ同じですが、私はそれをガイドとして使用しています。

EDIT

これは私のカスタムコントロールです：

<div class="calendar-wrapper row-small-margin" 
    (clickOutside)="isDatepickerActive = false;"> 

    <div class="col-xs-10 col-small-padding"> 
    <div class="input-group"> 

     <span class="input-group-addon" role="button" (click)="prevDay()" 
      *ngIf="selectedDate"> 
     <i class="fa fa-chevron-left"></i> 
     </span> 

     <input #textInput [textMask]="{mask: mask}" 
      [(ngModel)]="selectedDateString" 
      (ngModelChange)="inputChange()" 
      class="form-control" [required]="required" 
      [disabled]="disabled" (keyup)="onKeyPressed($event)"> 

     <span class="input-group-addon" role="button" (click)="nextDay()" 
      *ngIf="selectedDate"> 
     <i class="fa fa-chevron-right"></i> 
     </span> 
    </div> 

    <div *ngIf="isDatepickerActive" class="datepicker-wrapper"> 
     <datepicker [(ngModel)]="selectedDate" (ngModelChange)="dateChange()" 
        [showWeeks]="false" [required]="required" 
        [formatDay]="dd" [formatMonth]="MM" [formatYear]="yyyy" 
        [disabled]="disabled"> 
     </datepicker> 
    </div> 
    </div> 

    <div class="col-xs-2 col-small-padding"> 
    <button class="btn btn-sm btn-datepicker" [disabled]="disabled" 
     (click)="toggleDatePicker()" type="button"> 
     <img src="/assets/img/image.png"> 
    </button> 
    </div> 

</div> 

そして、これは私が私のフォームコンポーネントで何をすべきかです：：

@Component({ 
    selector: 'extended-datepicker', 
    templateUrl: './extended-datepicker.component.html', 
    styleUrls: ['./extended-datepicker.component.scss'], 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => ExtendedDatepickerComponent), 
     multi: true 
    } 
    ] 
}) 
export class ExtendedDatepickerComponent implements OnInit, ControlValueAccessor { 
    isDatepickerActive: boolean = false; 
    _selectedDate: Date; 
    selectedDateString: string = ""; 
    @Input() disabled: boolean; 
    @Input() mask: any; 
    @Input() required: boolean; 

    @ViewChild('textInput') textInput: ElementRef; 

    get selectedDate(): Date { 
    return this._selectedDate; 
    } 

    set selectedDate(value: Date) { 
    this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT); 
    this._selectedDate = value; 
    } 

    propagateChange: Function; 

    @ViewChild(DatePickerComponent) datepicker: DatePickerComponent; 

    constructor() { 
    } 

    writeValue(value: Date) { 
    if (value) { 
     this.selectedDate = value; 
     this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT); 
    } 
    } 

    registerOnTouched(): void { 
    } 

    registerOnChange(fn: Function) { 
    this.propagateChange = fn; 
    } 
    // ... 

これは、コントロールのテンプレートです

this.myForm.controls['pickDate'].valueChanges.subscribe(val => { 
    if (!val) { 
    this.myForm.controls['date'].disable(); // This line here does nothing 
    } 
}); 

私の拡張日付ピッカー内のそのdisable()コールにどのように応答してそれに応じて対応することができますか？

Answer 1

お客様のコンポーネントはインターフェイス（docs参照）で定義されているsetDisabledState機能を実装する必要があります。

など。 （レンダラはコンストラクタで注入されたと仮定した場合）：

setDisabledState(isDisabled: boolean) { 
    this.renderer.setElementProperty(this.textInput.nativeElement, 'disabled', isDisabled); 
    // disable other components here 
}