я не могу получить значение выбора "Не могу прочитать свойство 'значение' из неопределенного" со значением формы управления

Question

.i нужно получить значение опции выбора формы для элемента управления в объекте.Мой источник данных содержит 3 ValueId, которые мне нужны, чтобы присвоить их объекту Validid

 if (this.productForm.valid) {
                const values: any[] = [];
                if (this.dataSource.length > 0) {
                    for (let index = 0; index < this.dataSource.length; index++) {
                        const value = {
                            SkuId: 0,
                            OptionId: this.productForm.controls['OptionId'].value,
                            ValueId: this.dataSource[index].ValueId,
                        };
                        values.unshift(value);
                    }
                }
                return values;
            }

. Моя опция выбора Html:

<select id="option" class="form-control" placeholder="Product Option"
formControlName="optionId" (ngModelChange)="optionChange($event)"
                                                required>
                                                <option [value]="''">Product Option </option>
                                                <option *ngFor="let data of optionSource" [value]="data.id">
                                                    {{data.name}}
                                                </option>
                                            </select>

Ошибка при this.productForm.controls ['OptionId ']. Value,

моя функция щелчка по сумме:

  <button type="submit" class="btn btn-raised btn-primary" 
(click)="saveProduct()" > <i class="fa fa-check-square-o"></i> Save Product
                            </button>

снимок экрана с изображением ошибки