Angular 無法通過 [(ngModel)] 獲取輸入值，當被 JavaScript 更改時

Question

我創建了一個自定義輸入formControl ，所以我需要通過 [(ngModel)] 獲取/設置它的值：

import { Component, Injector, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';

@Component({
    selector: 'time-picker',
    template:
        `<input type="text" class="clockpicker" [formControl]="selectedTime" />`,
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => TimePickerComponent),
        multi: true,
    }]
})

export class TimePickerComponent implements OnInit, ControlValueAccessor {
    
    selectedTime = new FormControl('');

    constructor() { }

    ngAfterViewInit() {
        this.scriptLoader.load(
            'assets/clockpicker/clockpicker.js'
        );
    }
 
    writeValue(obj: any): void {
        if (this.selectedTime) {
            this.selectedTime.setValue(obj);
        }
    }

    registerOnChange(fn: any): void {
        this.selectedTime.valueChanges.subscribe(fn);
    }

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

}

如您所見，我已經加載了一個名為 clockpicker.js 的第三方clockpicker.js 。 （這只是一個簡單的時鍾選擇器），這里是它的代碼：

$(document).ready(function () {
    $('.clockpicker').each(function (index, element) {
        $(element).clockpicker({
            afterDone: function () {
                $(element).find('input[type="text"]').change();
            }
        });
    });
});

這是我的問題：

當我直接輸入此輸入時，我可以通過[(ngModel)]獲得插入的值，但是正如您所看到的，當 jQuery function 填充輸入值時，我無法通過[(ngModel)]獲得填充值。 我知道這是因為即使我使用它也無法在 Angular 生命周期中觸發registerOnChange事件

$(element).find('input[type="text"]').change();

什么都沒發生。

Answer 1

Angular 無法知道在其區域之外發生的變化。 這意味着您應該告訴您的 Angular 應用程序需要運行更改檢測周期以查看是否需要更新。

在您的情況下，您應該初始化組件內的clock-picker並使用ChangeDetectorRef檢測更改。 請閱讀更多關於NgZone的信息，這對於執行 Angular 區域之外的內容很有用。

可能有用：

• Angular 第三方庫交互
• 了解 Angular 的變更檢測
• 在 Angular forms 中實現 ControlValueAccessor 時再也不會感到困惑