Опции углового выбора скрывают неактивные, но все еще показывают историческую ценность - PullRequest
Новая
       18

Опции углового выбора скрывают неактивные, но все еще показывают историческую ценность

0 голосов
/ 23 июня 2019

Я использую Angular8 реактивные формы. Я создаю форму, которая должна быть предварительно загружена с деталями выбранного элемента по идентификатору. Сведения об элементе отображаются в форме путем передачи существующих значений элемента в метод FormControl (). Эта часть все работает правильно.

Однако проблема заключается в возможности отображения значения по умолчанию, если опция была отфильтрована из-за перехода в неактивное состояние в более позднее время.

ВОПРОС: Как заполнить значение по умолчанию, которого больше нет в массиве опций выбора?

Пример:

Форма Элемент имеет поле выбора «Проект», в котором отображается список проектов из базы данных.

Запрос к базе данных возвращает только «активные» проекты. Проект - это объект со свойствами _id, ProjectName и Inactive. 

// item.project
{"_id":"5d0699380a29581928374651",
"ProjectName":"Server upgrade to version 10",
"Inactive":0}

_id устанавливается в качестве значения, а ProjectName устанавливается в качестве отображаемого значения. 

<mat-form-field appearance="outline" floatLabel="always" class="width-50p">
  <mat-label>Project</mat-label>
  <mat-select formControlName="Project">
    <mat-option *ngFor="let project of projects" [value]="project._id">
      {{project.ProjectName}}
    </mat-option>
  </mat-select>
</mat-form-field>

Элемент управления формы 'Project' установлен на существующий project._id по умолчанию.

Это работает до тех пор, пока проект не будет отфильтрован из-за того, что позднее будет отключен. 

// Initialize form controls
this.itemForm = new FormGroup({
  // other item properties...
  'Project': new FormControl(item.project._id),
});

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

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

Ответы [ 2 ]

2 голосов
/ 23 июня 2019

Вы всегда можете добавить новую опцию в ваш коврик.Но сначала вам нужно создать такую ​​функцию, как (*) 

find(data:string)
{
   return this.projects.find(x=>x._id==data)
}

Так что вы можете сделать что-то вроде 

<mat-select formControlName="Project">
    <mat-option *ngFor="let project of projects" [value]="project._id">
      {{project.ProjectName}}
    </mat-option>

    <mat-option *ngIf="item?.project?._id && !find(item.project._id)
                [value]=item.project._id>{{item.ProjectName}}
    </mat-option>

</mat-select>

(*) Это необходимо, потому что вы не можете использовать в .html что-то вродеfind(x=>x._id==data)

0 голосов
/ 23 июня 2019

Благодаря принятому ответу мне удалось создать очень похожее решение. Единственная разница заключается в проверке, существует ли опция в компоненте TS. Опции выбора создаются после того, как существующее значение записи помещается в массив. 

  /**
   * Check if a value on record exists as a select box option already
   * A value on an existing record does not appear in select options if it is 'inactive'
   * Return true if the select option exists already
   * Return false if the select option does not exist already
   * @param {string} recordValue value on record
   * @param {array} options options array to check for the value e.g. projects
   * @param {string} optionsField field to check on the options array e.g. _id
   */
  private checkOption(recordValue: string, options: any, optionsField: string): any {
    const matchingOption = options.find(option => option[optionsField] == recordValue);
    return matchingOption ? true : false;
  }

/* Get select options */
// Get projects options from database
let projectsOptions = results[1].data.filter(project => project.ProjectName);

// Check if existing record has a selected project
if (project_id) {
  // Check if project value on record exists as a select box option already
  const projectOptionExists = this.checkOption(this.record.Project_id._id, projectsOptions, '_id');
  // If project on record is not available as an option in select box already
  if (!projectOptionExists) {
    // Add project on record to projects select options array
    projectsOptions.unshift(this.record.Project_id);
  }
}

HTML-код такой же, как и раньше. 

<mat-form-field appearance="outline">
  <mat-label>Project</mat-label>
  <mat-select formControlName="Project">
    <mat-option *ngFor="let project of projects" [value]="project._id">
      {{project.ProjectName}}
    </mat-option>
  </mat-select>
</mat-form-field>
...