angular - 通过 ngModel 将绑定值从 Input 元素传递给 Model

Question

我是 Angular 的新手。面临将输入值传递给我的数据库模型的问题。根据帐户 ID，数据库中的名字绑定到 Input 元素。但相同的输入值（AccountName）无法传递给模型。我在哪里做错了。需要建议。

在 html 模板中——

 <input type="text" class="form-control" (keyup.enter)="checkAccount($event)" [(ngModel)]="modelName.AccountId">

 <input type="text" class="form-control" value={{AccountName}} readonly [(ngModel)]="modelName.AccountName">

在组件中：

  checkAccount(event:any){
        if(event.keyCode == 13){
          this.customerService.getCustomer({customer_id: Number(event.target.value)}).subscribe(
            data => {
              if (data){
                this.AccountName = data.firstname;
            }else{
              alert("No Account Found");
            }
            }
          );
        }else{
        }
     }

我得到 {{modelName | json}} 输出为 {"AccountId": "6" }。预期的帐户名称应该在我的模型中可用。无法将 AccountName 传递给模型以插入数据库。

Answer 1

当您使用 [(ngModel)] 时，您需要将属性名称添加到您的标签：

 <input type="text" class="form-control" name="account-id" (keyup.enter)="checkAccount($event)" [(ngModel)]="modelName.AccountId">

我认为您不需要 value={{AccountName}} ngModel 足以显示您的数据它是双向绑定概念。

Answer 2

据我了解，您只想在从以下位置获取值后将“AccountName”显示为只读字段：

this.AccountName = data.firstname; 

尝试：

<input name="acntName" type="text" class="form-control" readonly [(ngModel)]="AccountName">