CODEWITHSUNDEEP
angularformsinputangular-reactive-forms
Harish
Harish

Reputation: 61

angular reactive forms does not take in value

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>

Upvotes: 0

Views: 785

Answers (1)

Armen Stepanyan
Armen Stepanyan

Reputation: 1848

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' })

Upvotes: 1

Related Questions