Angular 在另一个标签中显示 ngFor 值

Question

我有这样显示的公司列表：

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

这里有一个Working Sample 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>  

错误：

Answer 1

一个快速的解决方案可能是共享相同的模型

<div class="col-md-4">
    <select [(ngModel)]="selectedCompany" style="width:400px;">
    <option *ngFor="let x of mycompanylist"  [value]="x.name">{{x.name}}
    </option>
  </select>
  <input class="form-control" type="text" [(ngModel)]="selectedCompany"> 
</div>

所以如果用户在字段中输入也会更新选择的模型。

另一种解决方案可能是使用 ngModelChange

<div class="col-md-4">
    <select [(ngModel)]="selectedCompany" style="width:400px;" (ngModelChange)="onSelectedCompany($event)">
    <option *ngFor="let x of mycompanylist"  [value]="x.name">{{x.name}}
    </option>
  </select>
  <input class="form-control" type="text" [(ngModel)]="company" readonly> 
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  selectedCompany: string = null;
  company: string = null;

  mycompanylist = [
    { id: 1, name: 'Company 1' },
    { id: 2, name: 'Company 2' },
    { id: 3, name: 'Company 3' },
    { id: 4, name: 'Company 4' }
  ];


  onSelectedCompany(company: string) {  
    this.company = company;
  }
}

重要的是要突出只读属性，这样用户就不能输入任何东西