Question

我有一个基本指令，它作用于输入框以限制允许的最低值，在此测试用例中不小于零。

但是，由于内联模板错误，我无法通过此测试：0：0导致：null不是对象。

似乎可能与ngModel有关，但我在YouBooks或FaceTubes或Yahoogles的互联网上搜索都没有得到答案。

提前感谢您的帮助。

<div>hello</div>

这里是测试代码

import { Directive, Input, ElementRef, HostListener } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
selector: '[dleGbMinValue]',
providers: [NgModel]
})

export class MinValueDirective {

@Input('dleGbMinValue') minValue : string;

constructor(private el: ElementRef, private model: NgModel) { }

@HostListener('change') onChange() {
if (this.el.nativeElement.value && parseFloat(this.el.nativeElement.value) < parseFloat(this.minValue)) {
  this.model.valueAccessor.writeValue(parseFloat(this.minValue));
  this.model.viewToModelUpdate(parseFloat(this.minValue));
  }
}

@HostListener('blur') onBlur() {
if (!this.el.nativeElement.value || parseFloat(this.el.nativeElement.value) < parseFloat(this.minValue)) {
  this.model.valueAccessor.writeValue(parseFloat(this.minValue));
  this.model.viewToModelUpdate(parseFloat(this.minValue));
   }
  }
}

Answer 1

您无需在NgModel中提供MinValueDirective。

使用来自ngModel的{{1}}指令。

FormsModule

不要忘记将@Component({ template: `<input type="number" ngModel dleGbMinValue="0">` // add ngModel }) class TestMinValueDirectiveComponent {}导入测试模块：

FormsModule

然后为了防止错误：TestBed.configureTestingModule({ imports: [FormsModule], // here declarations: [TestMinValueDirectiveComponent, MinValueDirective] });来自inline template:0:0 caused by: Cannot read property 'target' of null更改

NumberValueAccessor

到

inputEl.triggerEventHandler('change', null);

您可以在 Plunker Example

中找到完整的测试

Angular2 jasmine测试失败并带有内联模板：0：0引起：null不是对象

1 个答案: