mz-input label is not set active when used with [(ngModel)] about ngx-materialize HOT 6 CLOSED

Can you verify if that's changed the behavior when you remove the attribute [value]="case.name?

The [(ngModel)] will automatically populate the field in HTML when the variable case.name will change because you are using the two way data binding.

from ngx-materialize.

It does the same even without [value].

from ngx-materialize.

This is what the render looks like from Chrome Dev Tools. As you can see, class="active" is missing from the label.

<mz-input-container _ngcontent-c3="" _nghost-c4="">
    <div _ngcontent-c4="" class="input-field">
        <input _ngcontent-c3="" id="caseName" mz-input="" name="caseName" type="text" class="validate ng-untouched ng-pristine ng-valid" ng-reflect-id="caseName" ng-reflect-data-error="Case Name is required" ng-reflect-label="Case Name" ng-reflect-validate="true" ng-reflect-name="caseName" ng-reflect-model="357325124">
        <label for="caseName" data-error="Case Name is required">Case Name</label>
    </div>
</mz-input-container>

from ngx-materialize.

Hi @ganeshkantu,

Thank you for reporting the issue, we have been able to reproduce the problem. It should be investigated and fixed soon.

As a workaround, you can add *ngIf on the mz-input-container to render the input only when the value has been returned from the server.

<mz-input-container *ngIf="case.name">
   <input mz-input [label]="'Case Name'" [validate]="true" [dataError]="'Case Name is required'" name="caseName" id="caseName" type="text" [(ngModel)]="case.name">
</mz-input-container>

from ngx-materialize.

@jfcere thanks! I will the try the *ngIf workaround and report back. However, the input element needs to be present for user-input as well - so can't use the *ngIf as a solution for my implementation.

from ngx-materialize.

I guess also somehow related: When resetting the input value to null programmatically (ngModel or form reset), the '.active' class on the label isn't removed.

from ngx-materialize.