CODEWITHSUNDEEP
javascriptnode.jsangulartypescript
Martin
Martin

Reputation: 557

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

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>

Upvotes: 0

Views: 1824

Answers (3)

Debabrata Paul Chowdhury
Debabrata Paul Chowdhury

Reputation: 495

The binding should be done using [(ngModel)] as follows.Try this hope this will work

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

Upvotes: 0

Ganesh
Ganesh

Reputation: 6016

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.

Upvotes: 1

Tony
Tony

Reputation: 20082

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"

Upvotes: 0

Related Questions