angular - MatInput value shows empty input fields after using value="x"

Question

I tried to assign a value to matInput with this code:

<form [formGroup]="updateNoteForm">
   <input matInput formControlName="title" class="input-test" type="text" value="{{ note.title }}">
</form>

My component.ts:

updateNoteForm = new FormGroup({
    title: new FormControl(),
    content: new FormControl()
});

But for some reason is the input empty. Before I used a formGroup and matInput everything showed up perfectly. But as soon as I added FormGroup it just shows empty input fields.

Angular material docs do it like this:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
  </mat-form-field>
</form>

Could someone help or is facing the same problem let me know!

Answer 1

The value is provided by the FormControl. You need to set it like this:

updateNoteForm = new FormGroup({
    title: new FormControl(note.title),
    content: new FormControl()
});