模拟 angular 奇特的输入

Question

当权者在发布前几周就已经决定，他们喜欢输入控件的现代外观，这些控件是下划线而不是方框，当输入具有焦点时标签会滑出。

本页演示效果： https://material.angularjs.org/latest/demo/input 单击名字以查看标签移动。

我的可重用组件如下所示：

<span 
    [ngClass]="styleClass" 
    class="wrapper">

    <label 
        [ngClass]="{'text-center': largeLabel, 'm-h-0': largeLabel}" 
        [attr.aria-labelledby]="id + '-label'">

        <span 
            [ngClass]="{'large-label': largeLabel}">
            {{ label }}
        </span>
    </label>

    <input 
        #element [value]="(isUppercase)?(textValue |uppercase): textValue" 
        (keyup)="onChange($event)" 
        (focusout)="executeAllTouchedFunctions(); 
        onChange($event)"
        [ngClass]="{'ng-invalid': !control?.valid && (control?.touched || control?.dirty) && !control.disabled, 'ng-dirty': control?.dirty, 'ng-touched': control?.touched}"
        [type]="type" 
        class="form-control" 
        [placeholder]="placeholder || ''" 
        [attr.aria-describedby]="(describedById) ? describedById : controlName?.name + '-described-by-id'"
        [name]="name" 
        [attr.aria-labelledby]="id + '-textField'" 
        [required]="isRequired" 
        [attr.maxlength]="maxlength" 
        [attr.aria-required]="isRequired"
        [disabled]="disabled" 
        (focus)="onFocus(e)" 
        [attr.aria-invalid]="!control?.valid && (control?.touched || control?.dirty)" />
</span>

因此，据我所知，要影响标签，当输入具有焦点时，我需要使用 JavaScript（使用某种 $(input).parent()。找到（标签））东西。

我已经添加了 onFocus() 事件，并且正在捕获该事件，但不确定如何处理它。

onFocus(event:FocusEvent) {
    console.log(FocusEvent);
}

这简直了returns

"FocusEvent() { [native code] }"

我期待一些我可以使用的对象。我能否获取 DOM 中的输入对象，以便找到其关联标签？

还是我想多了？

Answer 1

input controls that are underlines rather than boxes, with the labels that slide out of the way when the input has focus.

这种风格的输入框来自Google的Material Design系统。

Angular 团队创建了 Angular Material 库，因此您不必自己实现这些组件。 Here's the documentation 对于 <mat-form-field>.

this simply returns

"FocusEvent() { [native code] }"

您正在记录构造函数 FocusEvent 而不是记录您的 event 对象。如果您将代码更改为 console.log(event)，您应该得到一个如下所示的对象：

bubbles: false
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
path: (9) [input.s-input.js-search-field., div.ps-relative, form#search.searchbar.js-searchbar, div.-container, header.top-bar.js-top-bar.top-bar__network._fixed, body.question-page.unified-theme, html.html__responsive, document, Window]
relatedTarget: null
returnValue: true
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input.s-input.js-search-field.
target: input.s-input.js-search-field.
timeStamp: 100675.87499995716
type: "focus"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 0

并且您可以访问输入字段 event.target。

模拟 angular 奇特的输入

Emulating angular fancy inputs

angular

angular-forms