angular reactive forms does not take in value

Question

I have a reactive form that takes in values from my database and sets it in the fields. The form is meant to update the values to the database. When the values in the fields are edited, the updated fields can be successfully updated. However, when the values are not touched, the form is unable to get the values in the fields, resulting in empty values.

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" formControlName="title" id="title" value="{{review.title}}">
    </div>
    <button class="btn btn-danger" type="submit">Update Review</button>
</form>

Answer 1

This is not correct

value="{{review.title}}"

You must set control value in your component. Example

this.myForm = this.fb.group({  title: [review.title, [Validators.required]] })

Or when you get value from database, you can patch new value.

this.myForm.patchValue({ title: 'value from database' })