Angular 2 - User form control - Disable

Question

I created my own control using ControlValueAccessor, consisting of input[type=text] and datepicker.

When I use it in template forms, everything works fine. But when I use a model-based approach (reactive forms), the disable() method to control the form has no effect.

Is it possible to disable / enable my user control programmatically, as with any other form-driven form control.

EDIT

I should note that I am using Angular v2.1.0 and that my methodology is almost the same as this , since I have used it as a guide.

EDIT

This is my user control:

 @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 is a management template:

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

And here is what I do in my form component:

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

How can I answer this disable() call inside my extended datepicker and act accordingly?

Answer 1

The component must implement the setDisabledState function, which is defined in the ControlValueAccessor interface (see docs ).

eg. (assuming the renderer was introduced into the constructor):

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