以 angular 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" 这样的对象。

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

To take input element value's length in angular 2/4 form

angular2-forms

angular4-forms