Как получить значение элемента управления формы в качестве объекта и отобразить его метку в поле ввода? - PullRequest
Новая
       1

Как получить значение элемента управления формы в качестве объекта и отобразить его метку в поле ввода?

0 голосов
/ 20 октября 2019

У меня есть простая форма, где у меня есть поле ввода с автозаполнением (компоненты углового материала). Дело в том, что когда я выбираю значение из поля автозаполнения, поля ввода приводят к значению [Object object], в то время как я хотел бы, чтобы это был какой-то текст, связанный с оценщиком. Возможно ли это из коробки или мне нужно напрямую манипулировать элементом DOM для достижения этого?

значение этого поля намеренно является Host объектом.

Форма: 

<form [formGroup]="form" class="full-width">
  <mat-form-field>
    <mat-label>Host</mat-label>
    <input type="text" matInput formControlName="host" [matAutocomplete]="hostSuggestionsAutocomplete"
           placeholder="Host"/>
  </mat-form-field>
  <mat-form-field>
    <input matInput formControlName="delay" placeholder="Delay" type="number" min="1" max="3600"/>
    <mat-error>Delay must be between 1 and 3600 seconds</mat-error>
  </mat-form-field>
</form>

<mat-autocomplete #hostSuggestionsAutocomplete=matAutocomplete>
  <mat-option *ngFor="let hostSuggestion of hostSuggestions"
              [value]="hostSuggestion">{{hostSuggestion.toViewLabel()}} #{{hostSuggestion.id}}</mat-option>
</mat-autocomplete>

Хост: 

export class Host {
  id: number;
  address: String;
  label: String;
  status: HostStatus;
  lastStatusUpdate: Date;
}
Result af

тер выбора из автозаполнения:

enter image description here

Вместо [Object object] Я хотел быскажем, value.id + value.address или что-то подобное - в общем, пользовательская метка для этого.

В AngularDart была опция для указания переопределяемого элемента - функция, которая принимает значение и создает для него «метку», которая отображается в поле ввода.

Ответы [ 2 ]

0 голосов
/ 20 октября 2019

Как всегда, я знал, что есть решение, но я забыл, что это было, так как я читал документацию не очень тщательно. Что мне нужно, это [displayWith] атрибут MatAutocomplete. Это то же самое, что и элемент, представленный в угловых компонентах дротика.

https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

0 голосов
/ 20 октября 2019

Я не знаю ваш точный класс компонентов, но вот пример: 

export class FormFieldObject {
  options: FormGroup;
  value: Host;

  constructor(formBuilder: FormBuilder) {
    this.value = {id: 123, address: '555 Some Street'};

    this.options = formBuilder.group({
      color: 'primary',
      val: this.value.id + ' ' + this.value.address.toString(),
    });
  }
}

Шаблон: 

<form class="example-container" [formGroup]="options" [style.fontSize.px]="20">
  <mat-form-field [color]="options.value.color">
    <mat-label>Host</mat-label>
    <input matInput type="text" placeholder="Host" formControlName="val" min="10">
  </mat-form-field>
</form>

Это должно показать 123 555 Some Street в поле.

...