预先填充值的字段不会在 MD 引导框架上激活标签动画

Question

我正在使用MDBootstrap(A(的精简版本进行现场材料设计。在按下重置按钮后的一个字段中，该值已预先填充。但是，发生这种情况时，标签的动画不会激活，因此值和标签重叠。

顺便说一下，这是在首次加载页面时发生的。当它加载一个值时，它实际上可以工作，但是当我删除值时不起作用，然后我用按钮重置字段。值回来了，但动画标签的激活没有发生。可能是CSS问题。

<div class="md-form form-group">
               <input  type="text"
                       id="portalName"
                       mdbActive
                       [ngClass]="{'invalid':(portal.errors && portal.touched) || (portal.errors && portal.dirty), 'valid':(!portal.errors && portal.touched) || (!portal.errors && portal.dirty)}"
                       class="form-control"
                       name="portalName"
                       [(ngModel)]="portalName.companyName"
                       #portal="ngModel"
                       [maxlength]="12"
                       required />
                <label for="portalName">{{"CUSTOM_BRANDING.LABELS.BESPOKE_NAME" | translate }}</label>
                <div *ngIf="portal.errors && (portal.dirty || portal.touched)"
                     class="message position-absolute">
                    <div [hidden]="!portal.errors.required" class="error-message" >
                        {{"CUSTOM_BRANDING.ERRORS.REQUIRED" | translate }}
                    </div>
                    <div [hidden]="!portal.errors.maxlength" class="error-message" >
                        {{"CUSTOM_BRANDING.ERRORS.MAX_LENGTH" | translate }}
                    </div>
                </div>
            </div>

我不得不说我对角度 2 很陌生。我正在尝试在组件中创建一些东西，当重置发生并填充值时，至少要对 setTouch 或重置等字段进行检查。不知道什么是最好的。我在控制模板的组件中有此代码

 resetCustBrand = (): void => {
    this.facade.resetBrandLogoAndName(this.facade.CommonNodeModel.SelectedNode.Id)
        .subscribe({
            complete: () => {
                this.selectedNodeChanged(this.facade.CommonNodeModel.SelectedNode);
                this.translator.getTranslationBaseOnKey("CUSTOM_BRANDING.TOASTER_RESET_BRANDING").subscribe((message: string) => {
                    const toasterMessage = message.split(',');
                    this.toaster.pop("success", toasterMessage[0], toasterMessage[1]);
                });
            },
            error: () => this.translator.getTranslationBaseOnKey("CUSTOM_BRANDING.ERRORS.RESETING_BRANDING").subscribe((errorMessage: string) => this.notifyService.notifyUser(errorMessage))
        });
}

我希望我可以在这里添加一些东西来再次设置字段。

Answer 1

当字段被预填充/填充时，标签应该处于活动状态。

您可以尝试以下提到的代码：

<label class="active" *ngIf="portalName != null; else not">  <!-- portalName should be replace with your data on input -->
  {{"CUSTOM_BRANDING.LABELS.BESPOKE_NAME" | translate }}  <!-- Your label Name -->
</label>
<ng-template #not>
  <label class="">
    {{"CUSTOM_BRANDING.LABELS.BESPOKE_NAME" | translate }}  <!-- Your label Name -->
  </label>
</ng-template>

这种方法解决了我的问题。

Answer 2

MD 引导程序 5.2.3 正在使用 AfterViewCheck 生命周期钩子修复此问题，并对 AfterViewCheck 的输入进行另一次初始化。

这在使用 DoCheck 的较新升级中进一步处理。我们不能进一步升级到 5.3.2 以上，因为您的应用程序需要角度 6。

但我们使用此代码创建了解决方法。

import {AfterViewInit, Directive, DoCheck, ElementRef, HostListener, 
Input, Renderer2} from '@angular/core';
@Directive({
selector: '[mdbActive]'
})    
export class ActiveDirective implements AfterViewInit, DoCheck {
public el: ElementRef;
public elLabel: ElementRef;
public elIcon: Element;
constructor(el: ElementRef, public renderer: Renderer2) {
    this.el = el;
}
@HostListener('focus', ['$event']) onClick() {
    this.initComponent();
}
@HostListener('blur', ['$event']) onBlur() {
    this.checkValue();
}
@HostListener('change', ['$event']) onChange() {
    this.checkValue();
}
ngDoCheck() {
    this.checkValue();
}
ngAfterViewInit() {
    this.initComponent();
    this.checkValue();
    setTimeout(() => {
        this.checkValue();
    }, 0);
}
private initComponent(): void {
    let inputId;
    let inputP;
    try {
        inputId = this.el.nativeElement.id;
    } catch (err) {}
    try {
        inputP = this.el.nativeElement.parentNode;
    } catch (err) {}

    this.elLabel = inputP.querySelector('label[for="' + inputId + '"]') || inputP.querySelector('label');
    if (this.elLabel != null) {
        this.renderer.addClass(this.elLabel, 'active');
    }
    this.elIcon = inputP.querySelector('i') || false;
    if (this.elIcon) {
        this.renderer.addClass(this.elIcon, 'active');
    }
}
// May need to change to public so can be called from component.
// This may be required so that changes applied after losing focus (e.g. typeahead) can be checked for
// if the ngDoCheck event doesn't fire.
private checkValue(): void {
    let value = '';
    if (this.elLabel != null) {
        value = this.el.nativeElement.value || '';
        if (value === '') {
            this.renderer.removeClass(this.elLabel, 'active');
            if (this.elIcon) {
                this.renderer.removeClass(this.elIcon, 'active');
            }
        } else {
            this.renderer.addClass(this.elLabel, 'active');
        }
    }
}

}