MDB5 mdb-form-control ng-content

Topic: MDB5 mdb-form-control ng-content

sjardine pro premium priority asked 2 years ago

Expected behavior

See below

Actual behavior

See below

Resources (screenshots, code snippets etc.)

I am currently working on creating a set of input components based on MDB5 Angular. I have created a reusable field component that is a parent of specific input components.

Here is the template for the field:

<mdb-form-control>
  <ng-content></ng-content>
  <label mdbLabel *ngIf="label" class="form-label" [class.text-danger]="error" [for]="id"
  >{{ label }}<span *ngIf="required" class="required">
      <sup><i class="fa-solid fa-asterisk text-danger"></i></sup></span
  ></label>
  <mdb-error *ngIf="error">{{ errorMessage }}</mdb-error>
  <mdb-success *ngIf="success">{{ successMessage }}</mdb-success>
  <small *ngIf="helpText" class="help-message">{{ helpText }}</small>
</mdb-form-control>

Here is the template for the input:

<mjn-field
      [id]="id"
      [required]="required"
      [label]="label"
      [helpText]="helpText"
      [shortErrorMessage]="shortErrorMessage">
      <ng-container [formGroup]="formGroup">
        <input
          [type]="type"
          [readonly]="readonly"
          class="form-control {{ extraClasses }}"
          [id]="id"
          [formControlName]="name"
          mdbInput
          mdbValidate
          [required]="required"/>
      </ng-container>
      <ng-content></ng-content>
    </mjn-field>

For some reason the MdbFormControlComponent does not set the _formControl variable correctly. I am assuming that @ContentChild is not getting set because my input is not a child of my field component but in order to avoid a bunch of duplicate code the field wrapper needs to be separated from the input element.

Is there a way around this behavior? Is there a way to manually set the _formControl variable or update @ContentChild to see the children in ?

Thanks! Steve

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

@sjardine mdb-form-control needs access to the input element on initalization to recalculate label position and border-top gap. Unfortunately, it is not possible to manually define the _formControl variable after the component init.

Edit: Possible workaround (I assume you created custom components for both mdb-form-control wrapper and input):

Custom input:

@ViewChild(MdbInputDirective, { static: true }) input: MdbInputDirective;

Custom form control:

  @ContentChild(CustomInputComponent, { static: true }) customInput: CustomInputComponent;
  @ViewChild(MdbFormControlComponent, { static: true }) _controlWrapper: MdbFormControlComponent;

  ngOnInit(): void {
    this._controlWrapper._formControl = this.customInput.input;
  }

sjardine pro premium priority commented 2 years ago

This seems like a bug that should be addressed. It creates a lot of extra code in an environment that is supposed to promote reuse.

This has also been reported as a issue for angular with some potential workarounds:

https://github.com/angular/angular/issues/16299

Arkadiusz Idzikowski staff commented 2 years ago

@sjardine Thank you for the link. I did a bit more research and it looks this is a limitation of angular content projection: https://github.com/angular/angular/issues/37319 (still not fixed event in v14).

However, I tried to find a workaround based on the info given in these github issues and it seems there is a way to fix this problem. Please take a look at my edited answer and let me know if that helped.

I'm afraid this leads us to another problem with styles and this problem will be much harder to fix, especially without introducing breaking changes. The styles were prepared for a flat structure (form control, input, label) and they changes according to the input active state. It will be difficult to predict how to style these components when they are nested in other elements.

sjardine pro premium priority commented 2 years ago

Thank you for looking into this. Unfortunately, things didn't work well. I am just going to live with the duplicate code for the time being.

Thanks again!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 2.2.0
Device: Desktop
Browser: Chrome
OS: Ubuntu
Provided sample code: No
Provided link: No

sjardine

Pro User Premium support

10Support score
2Questions 0Answers

0Snippets likes 0Snippets