Topic: label not moving up when a form control value is set in component

lslacker free asked 7 years ago


I am using mdb angular pro, when setting value of a FormControl in component ( I am using reactive form), the input label, and label in autocomplete components are not moving up screenshot of an autocomplete component: https://imgur.com/Ewr2pai screenshot of an input component: https://imgur.com/P2vmCMO In component, I have to wait for data fetch from server, using async ngOnInit. Not sure how to fix this label. Thanks  

Dawid Adach pro commented 7 years ago

Have you added mdbActive  to the input? Check if that works if not , please share your project with us so we could have a look

lslacker free commented 7 years ago

I did add mdbActive, but it does not help in my case, below is sample code <div> <div> <div><div class="col-md-12"></div> <div><mdb-completer [label]="'Company name'"name="autocomplete" [formControl]="companyName" [datasource]="filteredOptions" [minSearchLength]="0"mdbActive></mdb-completer></div> <div></div></div> <div> <div><div class="col-md-12"></div> <div><divclass="md-form"></div> <div><inputtype="text"class="form-control"formControlName="productId"mdbActive></div> <div><label>Product ID</label></div> <div> </div></div> <div></div></div> </div> </div> </div> The component code: controls['productId'].setValue('abc'); controls['companyName'].setValue('123'); And of course, the value of the form is the result from http get. Not sure, which one prevents label from moving up when setting value? However you focus on the field, label moves up as normal.

Dawid Adach pro commented 7 years ago

Could you please mail me your sample html and ts file @ d.adach@mdbootstrap.com or share a link to code using Dropbox or similar?

Tanya pro answered 7 years ago


This workaround works for me:

[autofocus]="model.value'"

But ideal fix should be in completer.component.ts:

public ngAfterViewChecked(): void {
    if (this.mdbInput.nativeElement.value) {
        this._focus =true;
    }
    if (this._focus) {
        this.mdbInput.nativeElement.focus();
        this._focus =false;
    }
}

It checks the viewchild value and sets this._focus appropriately. 'focus' decides when to make the label active.

Hope they include the fix in the next release as we are having this issue as well


Dawid Adach pro commented 7 years ago

Tanya, thank you for your input! We will include this within next release. We really appreciate :)

Paperfree pro commented 7 years ago

Hello. It is not work when I have many components on one page. It is because of infinite call of focus() method. Also I cannot scroll page due to focus change. Do you have any other workaround?

manimurugan free commented 6 years ago

@Dawid Adach In angular 5 patchValue after that value set the label not move up. i had 7 input elements i use patchValue but patchValue function working fine but labels are not moving up

Dawid Adach pro commented 6 years ago

Dear manimurugan , as per moment I suggest to add class active to the label , this will bring it up.

manimurugan free commented 6 years ago

@Dawid Adach I added the class active in label but after execute the page that class active gone away. the active class automatically removed

Dawid Adach pro commented 6 years ago

manimurugan , you have to add class programmatically, not in static HTML

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags