0

我正在使用 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>

我不得不说我对 angular 2 很陌生。我试图在组件内部创建一些东西，当重置发生并且值被填充时，至少对 setTouched 或 reset 之类的字段进行检查。不确定什么是最好的。我在控制模板的组件中有这段代码

 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))
        });
}

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

4

2 回答 2

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>

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

于 2018-12-13T13:21:02.833 回答
0

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

这在使用 DoCheck 的较新升级中得到了进一步处理。我们无法升级到 5.3.2 以上，因为那时您的应用程序需要 angular 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');
        }
    }
}

}

于 2018-12-21T16:40:33.313 回答