У меня есть список компаний, которые я отображаю так:
<div class="col-md-4">
<select ngModel="selectedCompany" style="width:400px;">
<option *ngFor="let x of mycompanylist" value="{{x.id}}">{{x.name}}
</option>
</select>
<input class="form-control" type="text" formControlName="CompanyID" value = "{{selectedCompany}}">
</div>
Мне нужно, чтобы значение выбранной опции отображалось во входном теге. Я пытался сделать это с помощью ngModel, но он не работает.
Основная цель - передать значение formControlName, чтобы после отправки формы я мог получить значение, но если я сделаю это так:
<option *ngFor="let x of mycompanylist" value="{{x.id}}" fromControlName="ComapnyID">
параметры больше не отображаются
ОБНОВИТЬ
Я исправил это с помощью [(ngModel)]
и избавился от formControlName
.
Вот Рабочий образец StackBlitz для исх.
ОБНОВИТЬ
Форма:
<div class="col-md-4">
<select class="form-control" [(ngModel)]="selectedCompany">
<option *ngFor="let x of mycompanylist" [value]="x.id">{{x.name}}
</option>
</select>
</div>
<form [formGroup]="invoiceForm" (ngSubmit)="save()" #formDir="ngForm" novalidate>
<div class="form-group row">
<label class="control-label col-md-12" for="name">CompanyID</label>
<div class="col-md-4">
<input class="form-control" type="text" formControlName="CompanyID" value ="{{selectedCompany}}">
</div>
<span class="text-danger" *ngIf="invoiceForm.hasError('required', 'CompanyID') && formDir.submitted">
CompanyID is required.
</span>
</div>
<div class="form-group row">
<label class=" control-label col-md-12" for="description">VendorID</label>
<div class="col-md-4"> <input class="form-control" type="text" formControlName="VendorID"> </div>
</div>
<div class="form-group"> <button type="submit" class="btn btn-default">Save</button> <button class="btn" (click)="cancel()">Cancel</button> </div>
</form>
Ошибка: