Как заполнить элемент управления Select значением ID, полученным из файла JSON с помощью HTTPClient - PullRequest
Новая
       34

Как заполнить элемент управления Select значением ID, полученным из файла JSON с помощью HTTPClient

0 голосов
/ 19 июня 2019

В моем приложении Angular я заполняю элемент управления select ниже значениями, извлеченными из файла JSON с помощью HTTP-клиента. 

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

Может кто-нибудь подскажите, пожалуйста, как я могу получить доступ к идентификатору извыберите элемент управления и добавьте его в мой job объект?

Я также напечатал console.log('MANAGER VALUE: ' + this.jobForm.value.manager);, но это то, что напечатано:

МЕНЕДЖЕР ЗНАЧЕНИЕ: не определено

1 Ответ

0 голосов
/ 19 июня 2019

ОК, поэтому я понял, что мне нужно изменить.

Я добавил 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 выше должно соответствовать managerId в FormBuilder ниже.

Машинопись: 

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


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