mdb input elements not allowing to handled disabled property using reactive forms. We have to send separate disabled property by using attr.disabled attribute. By doing this it is working but showing unwanted console logs which are increasing bundle size of our application. We want to clean the console logs and wanted to maintain the consistent way of reactive forms.

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Expected behavior

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Actual behavior

<input mdbInputDirective [mdbValidation]="false" [formControl]="control" [attr.placeholder]="placeholder" (blur)="onInputBlur($event)"
    [ngClass]="{'strike': isStrikeOut}" [type]="type" class="form-control" [id]="ident" [name]="name" [attr.disabled]="disabled ? true : null"
    autocomplete="off" [maxlength]="maxlength">

We dont want to pass as input parameter as a seperate property for disabled

Resources (screenshots, code snippets etc.)