Angular Mat Input text is not working. It Displays, but cannot edit

Question

I´ve encountered this problem where I use the mat Input

<mat-form-field>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>`

The thing is, it displays correctly, but I can`t edit it , for some reason.

I would appreciate any help, thank you.

Here the image:

I have already imported all necessary things the angular material docs tells me. I really don't know what is happening, and it has never ocurred this to me before. I`ve then tried with a native html input, this one does not even appear.

Answer 1

there might be different reasons, why your app is not displaying the value. I guess you are using { ReactiveFormsModule } from '@angular/forms';

In this case, the value attribute can't be set manually but through the [formGroup] in the component.ts file. See here: https://angular.dev/guide/forms/reactive-forms/

Reactive forms have methods to change a control's value programmatically, which gives you the flexibility to update the value without user interaction. A form control instance provides a setValue() method that updates the value of the form control and validates the structure of the value provided against the control's structure.

If this is not the case, you could provide more information about the structure of your imports and code.