Угловой Материал Multi Select - PullRequest
Новая
       7

Угловой Материал Multi Select

0 голосов
/ 08 ноября 2018

После нескольких советов по использованию мультиселектора Angular Material 7. Документация не сильно помогает в том, что я пытаюсь сделать.

Немного предыстории о том, что я пытаюсь сделать.

Итак, мы создаем объект записи, и в рамках этого нам нужно знать, какая программа их финансирует. ProgrammeList - это массив объектов Program с {ProgrammeKey, Name, Description}. Ранее мы использовали отдельные выборки, и это прекрасно работает. Проблема заключается в том, что каждый отчет может финансироваться несколькими программами, поэтому нам нужно использовать множественный выбор.

Во-первых, когда дело доходит до базы данных. Как будут сохранены опции множественного выбора? Идея заключалась в том, что множественный выбор сформирует свой собственный массив выбранных объектов, а затем передаст их обратно на сервер, чтобы сохранить в таблице связей.

Я включил код ниже для соответствующих областей

record.dto.ts 

import {Programme} from "./programme.dto";

export class Record {
    Programme: Programme[];
    CcfLead: string;
    NihrRef: string;
    AddRef: string;
    AwardTitle: string;
    ProjectTitle: string;
    StartDate: Date;
    EndDate: Date;
}

general.component.ts ... 

 programmes = new FormControl();
 programmeList: Programme[];

 createRecordFrm() {
        this.recordFrm = this.fb.group({
            Programme : [{}, Validators.required],
            NihrRef: ["", Validators.required],
            AddRef:[""],
            CCFLead: ["", Validators.required],
            AwardTitle: ["", Validators.required],
            ProjectTitle: ["", Validators.required],
            StartDate: Date,
            EndDate: [Date, Validators.required]
        });
    }

    updateRecordFrm(record: Record) {
        this.recordFrm.setValue({
            Programme: record.Programme,
            NihrRef: record.NihrRef,
            AddRef: record.AddRef,
            CCFLead: record.CcfLead,
            AwardTitle: record.AwardTitle,
            ProjectTitle: record.ProjectTitle,
            StartDate: record.StartDate,
            EndDate: record.EndDate
        });
    }

open(content: any, modal?: Record) {
        this.msg = null;
        this.modalMsg = null;

        if (modal != null) {
            this.updateRecordFrm(modal);
            // update recordFrm
        }

        this.activeModal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', backdrop: "static", keyboard: false });
    }

general.component.html 

<ng-template #recordWizard let-c="close" let-d="dismiss" width="50%">
    <form novalidate (ngSubmit)="saveRecord(recordFrm.value)" [formGroup]="recordFrm">
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">New Record</h4>
            <button type="button" class="close" (click)="d('Cross Click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div *ngIf="modalMsg" role="alert" class="alert alert-info alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <mat-icon>report_problem</mat-icon>
                <span class="sr-only">Error:</span>
                {{modalMsg}}
            </div>

            <div>
                <mat-tab-group>
                    <mat-tab label="First">
                        <div class="form-group">
                            <span>NIHR Reference*</span>
                            <input type="text" class="form-control" readonly formControlName="NihrRef" />
                        </div>
                        <div class="form-group">
                            <span>Additional Reference</span>
                            <input type="text" class="form-control" readonly formControlName="AddRef" />
                        </div>
                        <div class="form-group">
                            <span>Funding Programme:*</span>
                            <mat-select class="form-control" placeholder="Funding Programmes" formControl="programme" multiple [compareWith]="compare">
                                <mat-option *ngFor="let programme of programmeList" [value]="programmeList">{{programme.Description}}</mat-option>
                            </mat-select>
                        </div>
                    </mat-tab>
                    <mat-tab label="Second">
                        Content 2
                    </mat-tab>
                    <mat-tab label="Third">
                        Content 3
                    </mat-tab>
                    <mat-tab label="Fourth">
                        Content 4
                    </mat-tab>
                    <mat-tab label="Fifth">
                        Content 5
                    </mat-tab>
                    <mat-tab label="Sixth">
                        Content 6
                    </mat-tab>
                </mat-tab-group>
            </div>
        </div>
        <div class="modal-footer">
            <div>
                <button type="submit" (click)="c" [disabled]="newRecordFrm.invalid" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Cancel</button>
            </div>

        </div>
    </form>
</ng-template>

И, наконец, ошибка console error

UPDATE

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

Существует новая проблема, при которой выпадающий список не выводится на передний план вида. и вместо этого за активной моделью. Могу ли я подать заявку на решение этой проблемы? enter image description here

Большое спасибо заранее за вашу помощь

Льюис

1 Ответ

0 голосов
/ 08 ноября 2018

Для нашего приложения мы используем ngModel вместо formControl. Мы делаем это так:

Filter.html 

<mat-form-field class="ca80">
  <mat-select [(ngModel)]="type_list" multiple name="type_list">
     <mat-option *ngFor="let type of alteration_types" [value]="type.id_type"> {{type.desc}}</mat-option>
  </mat-select>
</mat-form-field>

и filter.component.ts 

type_list: string[];
auxT: any[] = [];
/**...**/

  if (this.type_list != null) {
      for (let t of this.type_list) {
        auxT.push(t);
      }
    }

Мы не знаем, является ли это лучшим вариантом, но он отлично работает

...