Angular 2，自定義控件永遠不會被標記爲髒

我創建了一個自定義控件，我以編程方式提供值，因爲它是一個基於cropper.js的圖像編輯器，用戶通過正常的fileinput「上傳」圖像，而我然後使用File API將圖像分配給我的自定義控件。Angular 2，自定義控件永遠不會被標記爲髒

這裏的代碼（我刪除了一些cropper.js的可讀性特定代碼）

import { 
    Component, 
    OnInit, 
    ViewChild, 
    ElementRef, 
    ViewEncapsulation, 
    forwardRef 
} from '@angular/core'; 

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 
import * as Cropper from 'cropperjs'; 
import { Photo } from '../entities/photo'; 

@Component({ 
    selector: 'image-edit', 
    templateUrl: 'image-edit.component.html', 
    styleUrls: [ 
     'image-edit.component.scss', 
     '../../../node_modules/cropperjs/dist/cropper.min.css' 
], 
encapsulation: ViewEncapsulation.None, 
providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => ImageEditComponent), 
     multi: true 
    } 
    ] 
}) 

export class ImageEditComponent implements OnInit, ControlValueAccessor { 

    get value() { 
     return this.cropperImage.nativeElement.src; 
    } 

    set value(v: string) { 
     this.cropperImage.nativeElement.src = v; 
    } 

    public onTouch:() => void; 
    public onChange: (_: any) => void; 

    @ViewChild('cropperImage') 
    private cropperImage: ElementRef; 

    private isDisabled: boolean; 

    // cropper.js 
    private cropper: Cropper; 
    private cropperOptions: Cropper.CropperOptions = {}; 

    public ngOnInit(): void { 

     // init cropper.js 
    } 

    public writeValue(obj: any): void { 

     if (obj) { 
      this.value = obj; 
      this.initializeCropperOrReplaceImage(); 
     } 
    } 

    public registerOnChange(fn: any): void { 
     this.onChange = fn; 
    } 

    public registerOnTouched(fn: any): void { 
     this.onTouch = fn; 
    } 

    public setDisabledState(isDisabled: boolean): void { 
     this.isDisabled = isDisabled; 
    } 

    private initializeCropperOrReplaceImage(): void { 

     if (!this.isCropperInitialized) { 
      this.cropper = new Cropper(this.cropperImage.nativeElement, this.cropperOptions); 
      this.isCropperInitialized = true; 
     } 
     else { 
      this.cropper.replace(this.cropperImage.nativeElement.src); 
     } 

     URL.revokeObjectURL(this.cropperImage.nativeElement.src); 
    } 
}

這裏的模板

<image-edit [hidden]="!photo.data" #photoData="ngModel" name="photoData" [(ngModel)]="photo.data" validateMinImageDimensions minWidth="300" minHeight="400"> 
</image-edit>

不幸的是我的控制從來都不是髒或感動。我試圖擴展AbstractForm並設置自己的髒，但它沒有工作。它保持不污染和未受影響。

任何想法我做錯了什麼？

編輯

我因爲根據@在writeValue刪除調用onTouch和onChange n00dl3答案和註釋（見那裏）它不是一個很好的解決方案。

來源

2017-04-05 Arikael

請添加您的組件模板。 – n00dl3

你永遠不會調用this.onTouch()在您的組件，讓你的輸入不能被標記爲感動既不髒....

來源

2017-04-05 07:40:45 n00dl3

就是這樣，我需要在'writeValue'中調用'onTouch（）'和'onChange（obj）'。我用代碼 – Arikael

更新了問題，在'writeValue'中使用它們是沒有意義的，'當模型更新視圖時調用writeValue'，當裁剪圖像時應該調用這些回調函數。 – n00dl3

感謝您的額外的輸入，我會看看它 – Arikael

Angular 2，自定義控件永遠不會被標記爲髒

回答

相關問題