角度 2 使用指令防止输入和模型更改
Angular 2 Prevent input and model changing using directive
我需要验证一个字段是否只有一个范围内的数字。所以我试图写一个指令:
@Directive({
selector: "[input-limitation]",
host: {
'(input)': 'onChange($event)',
}
})
export class InputLimitationDirective {
@Input("input-limitation") settings: InputLimitationSettings;
public constructor(private el: ElementRef) {
let self = this;
console.log(":::::::::::::::: el.nativeElement", el.nativeElement);
//jQuery(el.nativeElement).on('keypress', function (e) { self.onChange(e) });
};
private onChange($event) {
console.log("InputLimitationDirective", this.settings);
if (this.settings.InputType = "number") {
return this.numberLimitation($event);
}
}
private numberLimitation($event: any) {
let val: number = $event.target.value;
console.log("InputLimitationDirective", val);
console.log(val, this.settings.MinValue);
console.log(!val, val*1 < this.settings.MinValue*1);
if (!val || val*1 <= this.settings.MinValue*1) {
console.log("1 case");
event.preventDefault();
event.stopPropagation();
return false;
}
else if (val*1 >= this.settings.MaxValue*1) {
console.log("2 case");
event.preventDefault();
event.stopPropagation();
return false;
};
return true;
}
}
并以这种方式使用:
<input (change)="totalAmountChanged($event.target.value)"
[(ngModel)]="model.UsedVolume"
[disabled]="!isEditMode"
type="number"
[input-limitation]="usedVolumeInputLimitationsSettings"
pattern="^[1-9]'d*$" min="1" max="999" maxlength="3"
class="form-control length-3-input" />
但这是一个大问题:1. 在 Angular 2 模型更改后触发此限制,因此我将在模型中获得 0 值(但我需要 1 作为最小值)。2.这只会更改输入值,而不会更改Angular 2模型值。
那么,是否可以在 Angular 模型更改之前验证和阻止某些输入?
我应该使用自定义值访问器来实现这一点。下面是一个示例:
const CUSTOM_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MaxValueAccessor), multi: true});
@Directive ({
selector: 'input[max]',
host: { '(input)': 'doOnChange($event.target)' },
providers: [ CUSTOM_VALUE_ACCESSOR ]
})
export class MaxValueAccessor extends DefaultValueAccessor {
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value);
}
}
doOnChange(elt) {
var val = elt.value;
// check value here
elt.value = val;
this.onChange(val);
}
}
这样,您可以插入ngModel
处理。
有关更多详细信息,请参阅此问题:
- 无法在模糊或设置值上更新绑定值
相关文章:
- 将输入值设置为ng模型属性[Angular]时出现问题
- 如何为动态创建的文本区域中输入的值更新ng模型
- 即使 ng 模型有值,也使输入字段为空
- 如何在不通过模型验证的情况下屏蔽文本输入中输入的字符
- 删除ng模型中的ng模型输入值
- Cakephp 访问不在模型数据数组上的输入
- 在 ng 模型中具有单向绑定的两个输入
- 使用输入更新 ng 模型数据
- AngularJS输入ng模型未更新
- 角度 2 使用指令防止输入和模型更改
- 输入文本是't在一种情况下以相同的形式更新与另一种情况相同的角度模型
- AngularJS绑定模型以选择更新输入数字字段,最小值为最大值
- AngularJS,如何将多个输入组合到一个ng模型中?具体来说,将日期、时间和时区输入组合到日期时间对象中
- 控制器内部无法访问Angular js输入模型
- ng模型在角度1.3中输入类型数的投掷误差
- 输入模型的Vuejs v-if条件
- 更改时,输入模型将从Integer更改为String
- 根据输入模型筛选列表,然后在Angular中进行选择
- 角度输入模型有条件地从一个属性读取,写入另一个属性
- 将输入模型绑定到数组中的每个对象