我已经input
在Angular 6中创建了一个自定义组件。此输入组件可以是typetext
或number
。如果是数字,则需要验证min
和max
值。
验证有效,但输入的值不会第二次更新。模型将更新。
该组件如下所示:
<input [type]="type" [min]="min" [max]="max" (keyup)="change($event.target.value)" [value]="value">
那是关于的变更事件keypress
:
change(value: any): void {
if (this.max) {
if (value > this.max) {
this.value = this.max;
this.valueChange.emit(this.value);
return;
}
}
if (this.min) {
if (value < this.min) {
this.value = this.min;
this.valueChange.emit(this.value);
return;
}
}
this.value = value;
this.valueChange.emit(this.value);
}
那是我的全部 InputComponent
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-custom-input',
templateUrl: 'input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
@Output() valueChange = new EventEmitter();
@Input() value: any = null;
@Input() type = 'text';
@Input() min: number;
@Input() max: number;
constructor() {}
ngOnInit() {}
change(value: any): void {
if (this.max) {
if (value > this.max) {
this.value = this.max;
this.valueChange.emit(this.value);
return;
}
}
if (this.min) {
if (value < this.min) {
this.value = this.min;
this.valueChange.emit(this.value);
return;
}
}
this.value = value;
this.valueChange.emit(this.value);
}
}
为什么输入值没有更新?模型正确更新。如果我调试代码,我看到的this.value
是预期的值,但在DOM中不是。
上图显示红色圆圈中的值也应在输入值中。如您所见,模型是正确的,但是输入值未更新。
替换[value]
为ngModel
:
<input [type]="type" [min]="min" [max]="max" (keyup)="change($event.target.value)" [(ngModel)]="value">
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句