Угловое отображение значения ngFor в другом теге - PullRequest
Новая
       39

Угловое отображение значения ngFor в другом теге

0 голосов
/ 26 декабря 2018

У меня есть список компаний, которые я отображаю так: 

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

Ошибка:

enter image description here

1 Ответ

0 голосов
/ 26 декабря 2018

Быстрым решением может быть совместное использование той же модели 

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

Важно выделить атрибут только для чтения, чтобычто пользователь не может ничего ввести

...