Populating JSON data in a form for editing purpose in Angular 8 CRUD

Question

Am working on a SPA build using Angular 8 on the frontend and Laravel on the backend. Am passing data to the backend via JWT which works fine. Since the app is a CRUD, on the read part (am using a table to display all the data from the backend in a tabular structure which works fine).

On the table (each row has an edit and delete button), when the user clicks on the edit button, am capturing the id, passing to the bakend and fetching the data related to that specific user and returning to the frontend into another component called EditComponent. The data is in form of JSON format.

Now am having a problem populating the each field from the JSON object into the form edit fields so that the user can update the form

Data from the backend after dumping in the view

{{ singleUser | json }}

{ "id": 8, "name": "man man", "age": 6, "gender": "Male", "created_at": "2019-07-02 10:43:35", "updated_at": "2019-07-02 10:43:35" } 

edit.component.html form

<form>
<!--Children details-->
<div class="card-header childheader">Update Details</div>
    <div class="card-body">
         <div class="form-group row">
         <div class="col-sm-12">
            <label for="childFirstName">Child Name</label>
            <input 
                type="text" 
                name="childFirstName" 
                class="form-control" 
                value="{{singleUser.name}}"
                id="childFirstName" 
                placeholder="Child FirstName">
        </div>
    </div>
    <div class="form-group row">
         <div class="col-sm-6">
             <label for="childAge">Child Age</label>
            <select 
                class="form-control" 
                id="chAge" 
                name="childAge" 
                value="{{singleUser.age}}"
                [(ngModel)]="form.childAge" 
                required>
                <option value="" selected disabled> Child's Age</option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
                <option value="6"> 6 </option>
                <option value="7"> 7 </option>
                <option value="8"> 8 </option>
                <option value="9"> 9 </option>
                <option value="10"> 10 </option>
                <option value="11"> 11 </option>
                <option value="12"> 12 </option>
                <option value="13"> 13 </option>
                <option value="14"> 14 </option>
                <option value="15"> 15 </option>
                <option value="16"> 16 </option>
                <option value="17"> 17 </option>
                <option value="18"> 18 </option>
            </select>
        </div>
        <div class="col-sm-6">
            <label for="childGender">Child Gender</label>
            <select 
                class="form-control" 
                id="childGender" 
                name="childGender" 
                value="{{singleUser.gender}}"
                [(ngModel)]="form.childGender"   
                required>
            <option value="" style="display:none"> Child's Gender</option>
                <option value="Male"> Male</option>
                <option value="Female"> Female </option>
            </select>
        </div>
    </div>
       <!--END children-->
    <div class="form-group row">
        <div class="col-sm-12">
            <button 
                type="submit" 
                class="btn btn-lg btn-success btn-block" 
                [disabled]="!createForm.valid">Update Details </button>
        </div>
    </div>
    </div>
</form>

Answer 1

you don't need to use {{ }} here for the value attribute,

simply do something like below

 value="singleUser.name"

if this not as @TonyNgo suggested use [(NgModel)] for two way binding.

This will update your variables when ever they are changed.

Answer 2

Maybe you just need to display like this

{{singleUser.name}}

{{singleUser.age}}

{{singleUser.gender}}

Update if you want to display data into input simply use ngModel like this

[ngModel]="singleUser?.gender"

Or 2 way binding

[(ngModel)]="singleUser.gender"

Answer 3

绑定应该使用[[ngModel）]完成，如下所示。

<input type="text"  name="childFirstName" class="form-control [(ngModel)]="singleUser.name" id="childFirstName" placeholder="Child FirstName"/>