禁用userid输入字段时更新用户出错

Question

尝试更新用户配置文件时出现错误Error: User not found.。似乎它没有发送我的userId。但当我启用userId输入字段时，它就工作了。我不知道该怎么解决。希望你们都能帮忙。

HTML

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" class="form-horizontal row-border">
<div class="form-group">
<label class="col-md-2 control-label color-label">User ID</label>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 padding-left">
<input matInput type="text" class="form-control form-input" name="userId"
[ngModel]="selectedRow?.userId" [disabled]="selectedRow?.userId" id="userId"
required>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label color-label">User Name</label>
<div class="col-lg-11 col-md-12 col-sm-12 col-xs-12 padding-left">
<div class="row">
<div class="col-md-5">
<input matInput type="text" class="form-control form-input" name="userName"
[ngModel]="selectedRow?.userName" id="userName" required>
</div>
<label class="col-md-2 control-label color-label">Email</label>
<div class="col-md-5 padding-left">
<input matInput type="email" class="form-control form-input" name="email"
[ngModel]="selectedRow?.email" id="email" required>
</div>
</div>
</div>
<div class="pt-md-3 col-md-11 text-right a_bottom">
<button type="submit" mat-flat-button color="primary"
[disabled]="isValidForm(userForm)">{{submitButtonLabel}}</button>
<button type="reset" mat-flat-button color="basic"
(click)="hideUserForm()">Cancel</button>
</div>

组件

onSubmit(form: NgForm ){
let data = form.value;
// data.groups = [].concat(this.groups).toString();
let method = this.selectedRow ? 'updateUserProfile' : 'createUserProfile';
this.userProfile[method](new User(data)).subscribe(res => {
if(method== 'updateUserProfile'){
this.toastrService.success('update succeeded!');
}else{
this.toastrService.success('create new user succeeded');
}
this.loadUsers();  
this.hideUserForm();    
}, err =>{
console.error(err);  
});
}

Answer 1

这是意料之中的事。如果你使用的是表单组，你可以使用以下方法：

fonSubmit(form: NgForm ){
let data = this.fg.getRawValue();
// Rest of the code

查看此处的文档

getRawValue((
FormGroup的聚合值，包括任何禁用的控件。

检索所有值，而不考虑禁用状态。value属性是获取组值的最佳方式，因为它排除了已禁用FormGroup中的控件。

如果你使用表单值，那么你需要像这样使用只读：

[readonly]="selectedRow?.userId"

可以设置禁用属性以阻止用户使用元素，直到满足其他条件(如选择复选框等(。然后，JavaScript可以删除禁用值，并使元素可用。

提示：表单中禁用的元素将不会提交！