Question

在Angular应用中，我使用通过HTTP客户端从JSON文件检索的值填充以下选择控件。

<label for="manager">Manager:</label>
    <select class="form-control" id="manager">
        <option value="" disabled>Choose manager</option>
        <option *ngFor="let manager of managers" [value]="manager.id">{{manager.fullName}}</option>
    </select>

这里是JSON：

"managers": [
    {
        "id": 1,
        "fullName": "Phil",
        "contactPreference": "email",
        "email": "phil@gmail.com",
        "phone": "0865963625"
    }
]

这是我创建表单的地方：

this.jobForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      managerId: [''],
    });

这是我拥有的job对象：

job: IJob = {
    id: null,
    title: '',
    description: '',
    employeeId: null,
    managerId: null
  };

我想通过选择选项中的managerId填充此job对象的manager.Id

这是我的尝试，但不起作用：

this.job.managerId = this.jobForm.value.manager;

有人可以告诉我如何从选择控件访问ID并将其添加到我的job对象吗？

我还打印了console.log('MANAGER VALUE: ' + this.jobForm.value.manager);，但这是打印的内容：

管理者值：未定义

Answer 1

好的，所以我想出了我需要更改的地方。

我将fomControlName添加到了选择控件。

HTML：

<select class="form-control" id="managerId" formControlName="managerId">
    <option value="" disabled>Choose manager</option>
    <option *ngFor="let manager of managers" [value]="manager.id">{{manager.fullName}}</option>
</select>

上面的formControlName需要与下面的FormBuilder中的managerId匹配。

打字稿：

this.jobForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      managerId: [''],
    });


this.job.managerId = this.jobForm.value.managerId;

如何使用HTTPClient使用从JSON文件检索的ID值填充Select控件

1 个答案: