在没有jQuery的情况下以编程方式更改Angular动态表单文本框值？

问题描述

这可能是一个很小的修复，但是我对Angular并不陌生，还不完全了解如何绑定组件和值...

我试图在Jasmine中编写一个单元测试，以确保更新此动态列表组件文本框的值时，将调用我的onValueChange（）处理函数。过去，这种方法通过...nativeElement.click()用于可点击的动态列表组件，但现在我有些头疼。

使用我的单元测试中的代码更新了文本框中中的实际打印文本（请参见第一个屏幕截图），但是直到我在文本框中进行击键操作后，Angular表单值才会更新

HTML映射的相关部分

<input
   class="form-control"
   [class.q-ngc-form-validation-border]="
   control.errors && control.touched
   "
   [formControlName]="name"
   [type]="type"
   [id]="name"
   [placeholder]="options.placeholder || ''"
   (ngModelChange)="onValueChange($event)"
/>
<button (click)="onClick()">Print current value</button>

组件中的相关文字代码

onValueChange(newValue: T) {
    console.log('text-input.ts onValueChange() just called!');
    this.value = newValue;
    this.valueChange.emit(this.value);
    this.emitSerializableStateChange();
}

onClick(){
    console.log('clicked');
    console.log('current value: ',this.value);
}

TESTbed初始化

beforeEach(async(() => {
    Testbed.configureTestingModule({
        imports: [TestCoreFormsModule]
    }).compileComponents();
    fixture = Testbed.createComponent<
        TestDynamicFormComponent<TestTextInputviewmodel>
    >(TestDynamicFormComponent);
    component = fixture.componentInstance;
    component.testDynamicFormSpec = cloneDeep(testTextInputForm);
    component.viewmodel = { textInputState: 'hello' };
    fixture.detectChanges();
}));

单元测试

fit('should call onValueChange after new input is entered',fakeAsync(() => {
    let textInputEl: DebugElement = fixture.debugElement.query(
            By.css('input.form-control')
        );
    let HTMLInput = textInputEl.nativeElement;
    console.log('textInputInputEl: ',textInputEl);
    console.log('HTMLInput: ',HTMLInput)

    HTMLInput.value = 'world';

    tick();
    fixture.detectChanges();

    fixture.whenStable().then(()=>{
        expect(component.formGroup.value.textInputState).toEqual('world');
    })
}));

Screenshot of jasmine test output,after clicking the 'print current value' button

Second image,immediately after typing the character 'i' and clicking the 'Print current value' button.

最终，我只是想编写一个测试来证明当文本框的值更改时，角形会使用正确的值更新。我认为有两种解决方案可以真正帮助我解决问题：

第一个方法是弄清楚如何获取Angular表单以识别文本框中的值已更改，这可能是通过某种发出事件引起的。 (ngModelChange)可能正在DOM中寻找一个事件，例如键盘事件，但是我真的不太了解如何弥合这种差距。

第二种方法是实际模拟文本框内的键盘事件，这是我尝试研究的，但是找不到实际在文本框内添加字符的设置。

如果有人可以将我引向这些解决方案之一，我将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）