Components: feat: allow `MatFormFieldControl` to be content projected into `mat-form-field` using `ng-content`

[rodaz]

Bug, feature request, or proposal:

Placeholder on input not floating when projected from ng-content.

What is the expected behavior?

Placeholder must floating, when input has some value.

What is the current behavior?

Placeholder looks like standard html placeholder, not like material placeholder.

What are the steps to reproduce?

StackBlitz: https://stackblitz.com/edit/angular-material2-issue-jekywv

What is the use-case or motivation for changing an existing behavior?

Inability to use mat input with content projection.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

latest

Is there anything else we should know?

In console i have an error: mat-form-field must contain a MatFormFieldControl.

[mmalerba]

FYI it's not just the placeholder that has issues, this is completely unsupported right now, hence the errors

[Ilya1vanov]

Have the same issue. This feature will extremely help me to reduce boilerplate html. @mmalerba, please, fix it! Thx

[guilnorth]

News?

[papakojo]

I ended up using material-design-lite as a temporary solution, hope this gets resolved soon.

[natepaxton]

Are there any related issues to this one? This seems like a very glaring oversight that should've been fixed by now.

[winstonchavez]

ERROR Error: mat-form-field must contain a MatFormFieldControl. same error, all modules working well, except this.

[ianchi]

Hi, any comments on the status of this issue?

[fxck]

Mh.. this complicates things. Not using ng-content but ngTemplateOutlet, but that the same story I guess.

[qwe852147]

There has a dirty method is setting the matformFieldControl in the custom field component.

StackBlitz: https://stackblitz.com/edit/angular-material2-issue-rewh7v?file=app/field.component.ts

[fatal-zio]

This is a rather glaring limitation. Hopefully it gets addressed soon.

[brampeirs]

This worked for me:

https://stackoverflow.com/questions/50574642/angular-material-mat-form-field-custom-component-matsuffix-in-ng-content

[iamruslanbakirov]

Waiting clear solutions...more than a year

[juniorgasparotto]

"Waiting clear solutions...more than a year" me too!

[robphoenix]

ping @mmalerba

Is resolving this a consideration atm?

[claytoncc]

You need to import the MatInputModule into your app.module.ts file

[kapalex]

A somewhat crude solution I found to bypass the issue

<mat-form-field>
  <input matInput [hidden]="true">
  <ng-container [ngTemplateOutlet]="content"></ng-container>
</mat-form-field>

Seems to work, although you should test carefully

[Nziranziza]

You need to import the MatInputModule into your app.module.ts file

import { MatInputModule} from '@angular/material';
works fine for me thanks @claytoncc

[hankchiutw]

I got this work by:

<mat-form-field>
  <input matInput hidden>
  <ng-content></ng-content>
</mat-form-field>

[GrandSchtroumpf]

I didn't managed to make @qwe852147's solution work with version 9. So I came up with an even dirtier solution:
html:

<mat-form-field>
  <ng-content></ng-content>
  <!-- Placeholder control to fool mat-form-field -->
  <ng-container *ngIf="beforeViewInit">
    <input matInput/>
  </ng-container>
</mat-form-field>

typescript:

export class FormFieldComponent implements AfterViewInit
  beforeViewInit = true;  // Used to remove placeholder control
  @ContentChild(MatFormFieldControl) control: MatFormFieldControl<any>;
  @ViewChild(MatFormField) matFormField: MatFormField;

  constructor(private cdr: ChangeDetectorRef) {}
  ngAfterViewInit() {
    if (this.beforeViewInit) {
      this.matFormField._control = this.control;
      this.beforeViewInit = false;
      this.cdr.detectChanges();
    }
  }
}

I just hope this issue will be addressed at some point to avoid this ugly / suboptimzed solution.

[ASKN2811]

Import "MatFormFieldControl" in which component you want to use if you use a particular component.

import { Component, OnInit } from '@angular/core';
import {MatFormFieldModule,MatFormFieldControl} from '@angular/material/form-field';
@Component({
selector: 'app-bike',
templateUrl: './bike.component.html',
styleUrls: ['./bike.component.scss']
})
export class BikeComponent implements OnInit {

constructor() {
}

ngOnInit(): void {
}

}

[mmalerba]

This is a limitation of Angular's content projection. https://github.com/angular/angular/issues/37319 has been filed to hopefully improve some of the short-comings

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}