如何更改此值.随机变量从HTML在组件.ts角

Question

我必须在component.ts中创建一个函数，而不是在html中拥有所有来自onblur的代码。但我不知道如何通过例如这个。从HTML输入到组件。这样当我改变组件的值时。它也应该改变它在HTML中的值。

<input id="date" type="text" #date
min="{{minDate|date:'yyyy-MM-dd'}}" max="{{maxDate|date:'yyyy-MM-dd'}}" 
placeholder="Today" 
onfocus="
this.type='date'
document.getElementById('date').addEventListener('keyup',function(e){
if (e.which == 13) {
this.blur();
}
}); 
" 
onblur="
selected_date=this.value.split('-');
min_date=this.min.split('-');
max_date=this.max.split('-');
if(  ( parseInt(selected_date[0], 10) > parseInt(min_date[0], 10) && parseInt(selected_date[0], 10) < parseInt(max_date[0], 10)) ||
( parseInt(selected_date[0], 10) == parseInt(max_date[0], 10) &&  parseInt(selected_date[1], 10) < parseInt(max_date[1], 10) ) ||
( parseInt(selected_date[0], 10) == parseInt(max_date[0], 10) &&  parseInt(selected_date[1], 10) == parseInt(max_date[1], 10) &&  parseInt(selected_date[2], 10) <= parseInt(max_date[2], 10)) ||
( parseInt(selected_date[0], 10) == parseInt(min_date[0], 10) &&  parseInt(selected_date[1], 10) > parseInt(min_date[1], 10) ) ||
( parseInt(selected_date[0], 10) == parseInt(min_date[0], 10) &&  parseInt(selected_date[1], 10) == parseInt(min_date[1], 10) &&  parseInt(selected_date[2], 10) >= parseInt(min_date[2], 10))
){
this.type='text';
this.value = selected_date[2].toString() + ' ' + selected_date[1].toString() + ' ' + selected_date[0].toString();
}
else{
if(selected_date == ''){
this.type='text';
}
else{
this.type='text';
error='Please enter a valid date';
this.value=error.toString();
}
}"
>

Answer 1

有几种方法可以做到这一点。

其中最简单的是ngModel。将一个变量链接到一个字段。

<input [(ngModel)]="varName" (blur)="functionName(varName)">

在组件中，你将有一个这样的函数:

ngOnIt(){
varName = '';
}
functionName(string varName) {
//**do stuff**
//the varName inside brackets is not required as 
//"this.varName" will already have the value
}