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

Question

在我的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以保持标签在顶部

Answer 1

这就是你想要的：

<input type="text" class="animate-label"
    (focusout)="onLeave(queryForm.value)" name="process" [(ngModel)]="process" [ngClass]="{'ontop': process?.length}">
    <label>Process</label>

然后你可以完全删除onLeave和hasValue。

问题是你提供了一个空的ngModel，它不会做任何事情。

我不知道你的模型看起来如何，但你可能想要将process绑定到像[(ngModel)]="someObject.process"这样的对象。