Köşeli 2 - Özel Form Denetimi - Devre dışı bırak

Question

Bir input[type=text] ve bir tarih seçiciden oluşan ControlValueAccessor kullanarak özel bir denetim oluşturdum.

Şablonlu formlarda kullandığımda her şey iyi çalışıyor. Ancak, modele dayalı yaklaşımı (reaktif formlar) kullandığımda, form denetimi üzerindeki disable() yönteminin herhangi bir etkisi yoktur.

mümkün/devre dışı Ben modele dayalı formların

DÜZENLEME

ben Açısal v2 kullanıyorum dikkat etmelidir diğer her form denetimi ile ilgisi programlı olarak benim özel denetimi sağlamak için mi. 1.0 ve benim metodoloji, onu bir kılavuz olarak kullandığım için this ile hemen hemen aynı.

DÜZENLEME

Bu benim özel denetim geçerli: Bu denetimin şablon

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

:

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

Ve bu benim form bileşeni yapması gereken şeydir:

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

Genişletilmiş tarihçamın içinde disable() aramasına cevap vermek ve buna göre davranmak nasıl mümkün olabilir?

Answer 1

Bileşeninizin, ControlValueAccessor arabiriminde tanımlanan setDisabledState işlevini gerçekleştirmesi gerekir (bkz. docs).

E.g. (Oluşturucusunu varsayarak yapıcı enjekte edilmiştir):

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