कोणीय 2 - कस्टम फॉर्म नियंत्रण -

Question

अक्षम करें मैंने input[type=text] और डेटपिकर से बना नियंत्रणवैल्यूएपर्स का उपयोग करके एक कस्टम नियंत्रण बनाया है।

जब मैं इसे टेम्पलेट-संचालित रूपों में उपयोग करता हूं तो सब ठीक काम करता है। लेकिन जब मैं मॉडल-संचालित दृष्टिकोण (प्रतिक्रियाशील रूप) का उपयोग करता हूं, तो फॉर्म नियंत्रण पर disable() विधि का कोई प्रभाव नहीं पड़ता है।

यह संभव अक्षम/मैं मॉडल पर ही आधारित रूपों

संपादित

मुझे लगता है कि मैं कोणीय v2 उपयोग कर रहा हूँ ध्यान देना चाहिए में हर दूसरे प्रपत्र नियंत्रण के साथ क्या प्रोग्राम के रूप में के रूप में अपने कस्टम नियंत्रण सक्षम करने के लिए है। 1.0 और यह कि मेरी पद्धति this जैसा ही है, क्योंकि मैं इसे एक गाइड के रूप में उपयोग कर रहा हूं।

संपादित

यह मेरा कस्टम नियंत्रण है:

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

और यही मैं अपने प्रपत्र घटक में क्या है:

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

मेरे विस्तारित-डेटपिकर के अंदर उस disable() कॉल का जवाब देना और तदनुसार कार्य करना संभव है?

Answer 1

आपके घटक को setDisabledState फ़ंक्शन को लागू करने की आवश्यकता है जो ControlValueAccessor इंटरफ़ेस में परिभाषित किया गया है (docs देखें)।

उदा। (रेंडरर संभालने निर्माता में इंजेक्शन किया गया):

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