时间戳

首页 > 解决方案 > Angular form not sending data

angular - Angular form not sending data

问题描述

I'm having issues with a form in Angular not sending data and I'm sure it's a binding issue but I don't know how to resolve it.

I'm retrieving a set of data from a database and populating a list of users and connecting to another control that renders a form to allow for updating the user:

User Listing

<div class="wrapper cf">

<div class="user-list">

<ul class="user-display-data users">
<li *ngFor="let user of users" class="cf"
[class.selected]="user === selectedUser"
(click)="onSelect(user); showDetails=1;">
<div class="user-badge-link" ><span class="display-data user-badge">{{user.first_name}} {{user.last_name}}</span>
<span class="user-display-data user-display-edit">Edit</span></div>
</li>
</ul>

</div>

<div class="user-details" *ngIf="showDetails === 1" >
<app-user-detail [user]="selectedUser"></app-user-detail>
</div>

</div>

Update Form

   <div class="details-wrapper">
    <div>
    <h2 class="sub-head-h2">{{user.first_name}} {{user.last_name}} Account Details</h2>
    <div class="user-detail-data">
    <div class="input-row">
    <label>First Name:</label>
    <input ng-model="first_name" value="{{user.first_name}}" />
    </div>
    <div class="input-row-odd">
    <label>Last Name:</label>
    <input ng-model="last_name" value="{{user.last_name}}" />
    </div>
    <div class="input-row">
    <label>Email:</label>
    <input ng-model="email" value="{{user.email}}" />
    </div>
    <input type="hidden" name="id" id="id" ng-model="id" value="{{user.id}}" />
    <button class="small-button" (click)="save()">Update User</button>
    <button class="small-button" (click)="delete()">Delete User</button>
    </div>
    </div>
    </div>

I have a function set up in my service to update the user on click:

Update User

updateUser (user: User): Observable<any> {

var userUpdatedUrl = 'http://dbs:8888/user-update/' + user.id + '/' + user.first_name + '/' + user.last_name + '/' + user.email + '/' + user.password;

console.log(userUpdatedUrl);

return this.http.get(userUpdatedUrl).pipe(tap(_ => this.log(`updated user id=${user.id}`)), catchError(this.handleError<any>('updateUser'))
);
}

The updateUser function fires when the button is clicked (the console logs the URL) but the values that populate the update form initially are the values sent to the endpoint, not the updated field values in the update form itself so I'm sure my fields aren't bound to the model properly (or at all maybe). Any ideas what might be going wrong?

标签： angulardata-binding

解决方案

如果您使用 angular 2 或更高版本，我相信您可能需要查看基本的表单验证和数据绑定，因为在您的代码中我可以看到数据绑定不正确。您可能会发现以下有用： https ://angular.io/guide/form-validation

推荐阅读