angularformsmatform-controlmat-form-field

Angular mat-form-field asks for "must contain a MatFormFieldControl", but it is a display-only text box

I am trying to put some messages into a text box, and want to utilize mat-form-field's versatility. The box is display only, which means it does not accept input. So I have:

<mat-form-field appearance="fill" style="width:2400px">
    <mat-label>Some messages from somewhere</mat-label>
    <textarea cdkTextareaAutosize  cdkAutosizeMinRows="6" [formControl]="some_message"></textarea>
</mat-form-field>

and in TS file:

some_message=new FormControl();

The problem is:Error: mat-form-field must contain a MatFormFieldControl.This is puzzling as I provided a control here. I also tried this:

<mat-form-field appearance="fill" style="width:2400px">
    <mat-label>Some messages from somewhere</mat-label>
    <textarea cdkTextareaAutosize  cdkAutosizeMinRows="6">"some_message"</textarea>
</mat-form-field>

Obviously this fails too. If I added MatInput, then this will pass. What's the catch here?

Solution

  • I agree that I have to add matInput, but meanwhile disable the textbox to prevent any user input:

    <mat-form-field appearance="fill" style="width:2400px">
    <mat-label>Some messages from somewhere</mat-label>
    <textarea matInput cdkTextareaAutosize  cdkAutosizeMinRows="6" 
    [formControl]="some_message" [disabled]="true"></textarea>
</mat-form-field>