Topic: label not moving up when a form control value is set in component
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 7 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 upDawid Adach pro commented 7 years ago
Dear manimurugan , as per moment I suggest to add class active to the label , this will bring it up.manimurugan free commented 7 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 removedDawid Adach pro commented 7 years ago
manimurugan , you have to add class programmatically, not in static HTMLClosed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
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 looklslacker 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?