Заполнение данных JSON в форме для редактирования в Angular 8 CRUD - PullRequest
Новая
       43

Заполнение данных JSON в форме для редактирования в Angular 8 CRUD

0 голосов
/ 03 июля 2019

Я работаю над сборкой SPA, используя Angular 8 на внешнем интерфейсе и Laravel на внутреннем. Я передаю данные на сервер через JWT, который работает нормально. Поскольку приложение является CRUD, в части для чтения (я использую таблицу для отображения всех данных из серверной части в табличной структуре, которая работает нормально).

В таблице (в каждой строке есть кнопка редактирования и удаления), когда пользователь нажимает кнопку редактирования, я собираю идентификатор, передаю в пакет и извлекаю данные, относящиеся к этому конкретному пользователю, и возвращаюсь во внешний интерфейс в другой компонент называется EditComponent. Данные представлены в формате JSON.

Теперь у меня проблема с заполнением каждого поля из объекта JSON в поля редактирования формы, чтобы пользователь мог обновить форму

Данные из серверной части после сброса в представлении 

{{ 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>

Ответы [ 3 ]

1 голос
/ 03 июля 2019

вам не нужно использовать {{ }} здесь для атрибута значения,

просто сделайте что-то вроде ниже 

 value="singleUser.name"

если это не так, как @TonyNgo предложил использовать [(NgModel)] для двухстороннего связывания.

Это обновит ваши переменные, когда они будут изменены.

0 голосов
/ 03 июля 2019

Связывание должно быть выполнено с использованием [(ngModel)] следующим образом. Попробуйте надеяться, что это будет работать 

<input type="text"  name="childFirstName" class="form-control [(ngModel)]="singleUser.name" id="childFirstName" placeholder="Child FirstName"/>
0 голосов
/ 03 июля 2019

Может быть, вам просто нужно отобразить вот так 

{{singleUser.name}}

{{singleUser.age}}

{{singleUser.gender}}

Обновите, если вы хотите отобразить данные на входе, просто используйте ngModel, как это 

[ngModel]="singleUser?.gender"

или 2-х сторонний переплет 

[(ngModel)]="singleUser.gender"
...