mat-form-field must contain a MatFormFieldControl

0 votes

I want to build a form-field-Components. I am trying to wrap the material design's Components like this:

Field:

<mat-form-field>

    <ng-content></ng-content>

    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>

    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>

    <mat-error>This field is required</mat-error>

</mat-form-field>

Textbox:

<field hint="hint">

    <input matInput 

    [placeholder]="placeholder" 

    [value]="value"

    (change)="onChange($event)" 

    (keydown)="onKeydown($event)" 

    (keyup)="onKeyup($event)" 

    (keypress)="onKeypress($event)">

</field>

Usage:

<textbox value="test" hint="my hint"></textbox>

The approximate result:

    <textbox placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">

       <field>

          <mat-form-field class="mat-input-container mat-form-field>

             <div class="mat-input-wrapper mat-form-field-wrapper">

                <div class="mat-input-flex mat-form-field-flex">

                   <div class="mat-input-infix mat-form-field-infix">

                      <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

                      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>

                   </div>

                </div>

                <div class="mat-input-underline mat-form-field-underline">

                   <span class="mat-input-ripple mat-form-field-ripple"></span>

                </div>

                <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>

             </div>

          </mat-form-field>

       </field>

    </textbox>

I am getting this error:  "mat-form-field must contain a MatFormFieldControl" in the console. How can I fix this?

May 13, 2022 in Angular by Kichu
• 19,050 points
3,466 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Angular

0 votes
1 answer

How to do a Jquery Callback after form submit?

Hello @kartik, Just do like this - $("#myform").bind('ajax:complete', function() ...READ MORE

answered Jul 24, 2020 in Angular by Niroj
• 82,880 points
8,145 views
0 votes
1 answer

How can we reload a page after requesting the same get parameter using AngularJS?

hey kartik, The reason for this is that ...READ MORE

answered Feb 10, 2020 in Angular by Niroj
• 82,880 points
12,605 views
0 votes
1 answer

How to pass a string parameter from angular UI to node.js backend?

Hello Kartik, There are three ways to get ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,880 points
10,767 views
0 votes
2 answers

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,880 points
29,127 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
2,417 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
25,023 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,190 points
1,505 views
0 votes
1 answer
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10, 2022 in Others by Rahul
• 9,680 points
21,166 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11, 2022 in Others by narikkadan
• 63,680 points
2,159 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP