Góc 2 - Điều khiển biểu mẫu tùy chỉnh - Tắt

Question

Tôi đã tạo điều khiển tùy chỉnh bằng cách sử dụng ControlValueAccessor bao gồm input[type=text] và bộ đếm ngày.

Khi tôi sử dụng nó ở dạng mẫu, mọi thứ hoạt động tốt. Nhưng khi tôi sử dụng phương pháp tiếp cận theo mô hình (dạng phản ứng), phương pháp disable() trên điều khiển biểu mẫu dường như không có bất kỳ ảnh hưởng nào.

Có thể tắt/bật điều khiển tùy chỉnh của tôi lập trình như tôi làm với tất cả các điều khiển biểu mẫu khác dưới các hình thức mô hình-driven

EDIT

tôi nên lưu ý rằng tôi đang sử dụng v2 góc. 1.0 và phương pháp của tôi khá giống với this vì tôi đã sử dụng phương pháp này làm hướng dẫn.

EDIT

Đây là điều khiển tùy chỉnh của tôi:

@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; 
    } 
    // ... 

Đây là của kiểm soát mẫu:

<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> 

Và đây là những gì tôi làm trong thành phần hình thức của tôi:

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

Làm cách nào để trả lời cuộc gọi disable() bên trong trình mở rộng datepicker của tôi và hành động tương ứng?

Answer 1

Thành phần của bạn cần triển khai chức năng setDisabledState được xác định trong giao diện ControlValueAccessor (xem docs).

Ví dụ: (Giả sử các renderer đã được tiêm trong constructor):

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