Блог

Вместо того, чтобы иметь весь код из onblur в html, я должен создать функцию в файле component.ts. Но я понятия не имею, как, например, передать this.type из html в component.ts таким образом, чтобы при изменении значения в component.ts оно также меняло свое значение в 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) amp;amp; parseInt(selected_date[0], 10) < parseInt(max_date[0], 10)) ||
         ( parseInt(selected_date[0], 10) == parseInt(max_date[0], 10) amp;amp;  parseInt(selected_date[1], 10) < parseInt(max_date[1], 10) ) ||
         ( parseInt(selected_date[0], 10) == parseInt(max_date[0], 10) amp;amp;  parseInt(selected_date[1], 10) == parseInt(max_date[1], 10) amp;amp;  parseInt(selected_date[2], 10) <= parseInt(max_date[2], 10)) ||
         ( parseInt(selected_date[0], 10) == parseInt(min_date[0], 10) amp;amp;  parseInt(selected_date[1], 10) > parseInt(min_date[1], 10) ) ||
         ( parseInt(selected_date[0], 10) == parseInt(min_date[0], 10) amp;amp;  parseInt(selected_date[1], 10) == parseInt(min_date[1], 10) amp;amp;  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();
        }
    }"
>
 

Есть несколько способов сделать это.

Одним из самых простых является 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
    }