Issue disabling inputs using FormControl and mdb-form-contro


Topic: Issue disabling inputs using FormControl and mdb-form-control

Dave Moniz pro premium priority asked 5 months ago

Expected behavior

Setting a FormControl to be disabled using the recommended method should work

Actual behavior

It doesn't. Additionally, doing it the way recommended in the MDB documentation ( [disabled]="true" ) throws a angular warning

Resources (screenshots, code snippets etc.)

HTML

<mdb-form-control>
    <input mdbInput [mdbValidate]="true" id="firstname" name="firstname" formControlName="firstnameControl" type="text" class="form-control">
    <label mdbLabel for="firstname" class="form-label">First name</label>
    <mdb-error *ngIf="(firstnameControl?.invalid && (firstnameControl?.dirty || firstnameControl?.touched))">This must not be blank</mdb-error>
    <mdb-success *ngIf="firstnameControl?.valid && (firstnameControl?.dirty || firstnameControl?.touched)"></mdb-success>
</mdb-form-control>

TS

this.formGroup = new FormGroup({
    firstnameControl: new FormControl({
        value: this.firstname, disabled: true }, {
        validators: [Validators.required], updateOn: 'change'
    })
});

using the code (above) does not result in a disabled field, additionally this does not disable the field: this.firstnameControl.disable();


Arkadiusz Idzikowski staff commented 5 months ago

@Dave Moniz We will take a closer look at this and add possibility to disable the control using Angular form control. For now, please use [disabled] on mdbInput, Angular will always suggest to handle disabled state using FormControl options, but this warning should not be displayed in production build.


Dave Moniz pro premium priority answered 3 months ago

Can confirm this is addressed as of v1.1.0, closing now.


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No