当被 JavaScript 更改时，Angular 无法通过 [(ngModel)] 获取输入值

Posted 2023-02-22

【中文标题】当被 JavaScript 更改时，Angular 无法通过 [(ngModel)] 获取输入值

【英文标题】：Angular can't get input value by [(ngModel)], when changed by JavaScript

【发布时间】：2021-07-13 02:25:47

【问题描述】：

我创建了一个自定义输入 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 的 javascript 第三方。 （它只是一个简单的时钟选择器），这里是它的代码：

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

这是我的问题：

当我直接输入此输入时，我可以通过[(ngModel)] 获取插入的值，但是正如您所看到的，当 jQuery 函数填充输入值时，我无法通过[(ngModel)] 获取填充的值。 我知道这是因为即使我使用它也无法在 Angular 生命周期中触发 registerOnChange 事件

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

什么都没有发生。

【参考方案1】：

Angular 无法知道在其区域之外发生的更改。这意味着您应该告诉您的 Angular 应用程序需要运行更改检测周期以查看是否有任何内容需要更新。

在您的情况下，您应该在组件内初始化 clock-picker 并使用 ChangeDetectorRef 检测更改。请阅读更多关于 NgZone 的信息，这对于执行 Angular 区域之外的操作很有用。

可能有用：

Angular 3rd party library interaction Understanding Angular's Change Detection Never again be confused when implementing ControlValueAccessor in Angular forms

【讨论】：

谢谢，我也尝试过 ChangeDetectorRef，但再次无法实现更改，从您的角度来看，我在哪里调用 ChangeDetection()？

我认为在 afterDone 或颜色选择器库调用更改的特定方法中，但我认为您也应该就该更改与自定义控件进行沟通。

再次感谢亲爱的，让我阅读您的链接说明，然后再试一次。

没问题。如果您遇到问题，请告诉我，如果您能找到解决方案，请随时在此处回复；)