以2/4角形式获取输入元素值的长度

在我的angualr 2模板表单中,我以类似于的方式设计了输入字段 focus ,在输入元素顶部和 focus-out 标签返回到输入元素。 similar like this one : [codepen]

我的问题是,即使控件有应该在代码中处理的值,标签也会掉下来。我不知道如何获取输入元素的长度来检入 component 将标签保持在顶部。

HTML:

<form #queryForm="ngForm" (ngSubmit)="Search(queryForm.value)">
<div class="form-input">
    <div>
        <input type="text" class="animate-label"
        (focusout)="onLeave(queryForm.value)" name="process" ngModel [ngClass]="{'ontop':hasValue}">
        <label>Process</label>
    </div>

组件:

export class FormTemplate{
hasValue:boolean;

onLeave(form:any){ //is this the right way to get the value back to component??
    console.log(form)
    if(form.process.length>0) //syntax??
    {
        this.hasValue=true;
    }
}}

当元素有值时,我将 ngClass #hasValue 将标签保持在顶部