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

【问题标题】：To take input element value's length in angular 2/4 form以角度 2/4 形式获取输入元素值的长度
【发布时间】：2018-02-28 09:03:43
【问题描述】：

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

【问题讨论】：

标签： angular2-forms angular4-forms

【解决方案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" 这样的对象。

【讨论】：