Search code examples
javascriptangularngforngmodel

Angular display ngFor value in another tag

I have list of comapnies which I display like that:

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

I need the value of selected option to be displayed in input tag. I tried to do it with ngModel but it doesnt work.

The main purpose is to pass the value to formControlName so after form is submitted I can recieve the value but if I do it like this:

<option *ngFor="let x of mycompanylist"  value="{{x.id}}" fromControlName="ComapnyID">

the options are no longer displayed

UPDATE

I fixed it using [(ngModel)] and getting rid of formControlName.

Here's a Working Sample StackBlitz for ref.

UPDATE

Form:

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

Error:

enter image description here

Solution

  • A quick solution could be sharing the same model

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

    So if the user typing in the field also update the model of the select.

    Another solution could be to use 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;
  }
}

    Important to highlight the read-only attribute so that the user can not enter anything