角度形式不发送数据

时间:2018-10-16 13:20:53

标签: angular data-binding

我遇到了Angular中的表单无法发送数据的问题,我确定这是一个有约束力的问题,但我不知道如何解决。

我正在从数据库中检索一组数据,并填充用户列表,并连接到另一个呈现表单以允许更新用户的控件:

用户列表

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

更新表格

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

我在服务中设置了一项功能,可以在点击时更新用户

更新用户

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

单击按钮(控制台记录URL)时,将触发updateUser函数,但是最初填充更新表单的值是发送到端点的值,而不是更新表单本身中的更新字段值,所以我确保我的字段未正确绑定到模型(或可能根本未绑定)。任何想法可能出什么问题吗?

1 个答案:

答案 0 :(得分:0)

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