Question

我正在用角度7构建反应形式，我想做的是： 1.从“名称”下拉列表中选择一个用户； 2.在“用户名”部分（image）下自动显示属于该用户的用户名； 3.提交表单时，我只想发送所选用户的ID。

我当前的方法适用于步骤1和步骤2，我现在遇到的唯一问题是将[user]对象绑定到[ngValue]而不是ID，这导致我提交了用户的所有详细信息最后，不只是ID。同样显然，我应该停止在反应形式上使用ngModelChange。

我不确定是否可以解决此问题。如果使用“ user.id”作为值，则无法再访问用户名（或用户的其他详细信息）。

我看到了一些使用ngModel和ngModelChange的示例，但是根据angular doc，“在Angular v6中已弃用对ngModel输入属性和ngModelChange事件与反应形式指令的支持，并将在Angular v7中删除。 / p>

对于我正在使用的数据this

html

CFRelease((__bridge CFTypeRef)(client));

ts

 <form class="form" [formGroup]="addUser" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-3">
        <div class="form-group">
          <label for="username">Username:</label>
          <p>{{selectedUser.username}}</p>

        </div>
      </div>
      <div class="col-9">
        <div class="form-group">
          <label for="name">Name:</label>
          <select class="form-control" formControlName="name" (ngModelChange)="selectUser($event)">
            <option *ngFor="let user of users" [ngValue]="user">{{ user.name }}</option>
          </select>
        </div>
      </div>
    </div>
</form>

Answer 1

您可以尝试以下操作：

<select class="form-control" formControlName="name" [ngModel]="selectUser" name="selectUser" (ngModelChange)="selectUser($event)">

在.ts中：

@Output() selectUser: number;

....
  selectUser(selectUser) {

    this.selectUser = selectUser;
}

编辑：

错误出现在[ngValue]中：

<option *ngFor="let user of users" [ngValue]="user.id">{{ user.name }}

您需要将用户ID放在ngValue中，而不是用户对象中

Answer 2

尝试一下：

<select class="form-control" 
      formControlName="name" 
      (change)="selectUser()">
<option *ngFor="let user of users"  
        [ngValue]="user">{{ user.name }}</option>
  </select>

在组件中

userID: number;
userName: string;

selectUser = () => {
   const user = this.addUser.get('name').value;
   this.userId = user.id;
   this.userName = user.name
};

通过选择下拉选项输出对象值

2 个答案: