无法绑定到“（ngModel”，因为它不是角度单元测试用例中“输入”的已知属性

Posted 2023-03-13

【中文标题】无法绑定到“（ngModel”，因为它不是角度单元测试用例中“输入”的已知属性

【英文标题】：Can't bind to '(ngModel' since it isn't a known property of 'input' in angular unit test case

【发布时间】：2018-05-07 06:02:44

【问题描述】：

在角度单元测试用例中出现“无法绑定到 '(ngModel'，因为它不是 'input' 的已知属性”错误

import  Component  from '@angular/core';
import  async, ComponentFixture, TestBed  from '@angular/core/testing';
import  FormsModule  from '@angular/forms';
import  By  from '@angular/platform-browser';

@Component(
    template: `<form>
                <input type="text" name="name" [(ngModel]="modelValue"/>
               </form>`
)

class TestFormComponent 
    modelValue: 'xyz';


describe('TestFormComponent', () => 
    let component: TestFormComponent;
    let fixture: ComponentFixture<TestFormComponent>;

    beforeEach(() => 
        TestBed.configureTestingModule(
            imports: [ FormsModule ],
            declarations: [ TestFormComponent ]
        ).compileComponents();
        fixture = TestBed.createComponent(TestFormComponent);
        component = fixture.componentInstance;
    );

    it('should be ok', async(() => 
        fixture.detectChanges();
        fixture.whenStable().then(() => 
            const input = fixture.debugElement.query(By.css('input'));
            const el = input.nativeElement;

            expect(el.value).toBe('xyz');

            el.value = 'abc';
            el.dispatchEvent(new Event('input'));

            expect(component.modelValue).toBe('abc');
        );
    ));
);

错误

TestFormComponent 应该更新模型值 FAILED 错误：模板解析错误： 无法绑定到“（ngModel”，因为它不是“输入”的已知属性。（“ ][(ngModel]="modelValue"/> ")

我已导入 FormsModule。如果我错过了什么，请指导我

【问题讨论】：

答案有帮助吗？

【参考方案1】：

你的模板错误

改变

 <input type="text" name="name" [(ngModel]="modelValue"/>

到

 <input type="text" name="name" [(ngModel)]="modelValue"/>

【讨论】：

感谢@Sajee，我在expect(el.value).toBe('xyz') stmt 中也测试失败了。我已经设置了初始值，例如 modelValue: 'xyz'。为什么它不起作用？

我不知道测试，我会看看并更新你