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"之类的对象上。

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

1 个答案: