Mat multi Select не может установить флажки, отмеченные значениями, возвращенными из API - PullRequest
Новая
       39

Mat multi Select не может установить флажки, отмеченные значениями, возвращенными из API

0 голосов
/ 27 марта 2020

Я использую Angular 7 и выбор нескольких материалов ... Я не могу установить флажок со значениями, возвращенными из API 

this is the multiselect that I am using for multi select dropdown
input-form.component.html

dropdownList = [{1, "orange"}, {2, "яблоко"}, {3, "виноград"}, {4, "киви"}] 

    <label *ngIf="model.type == 'multiselect-drop-down'" class="label app-label pull-left">
          <mat-form-field>
            <mat-label>Select Items</mat-label>
            <mat-select [formControlName]="model.controlName" 
            value="{{model.value}}"
             multiple>
                <mat-option *ngFor="let topping of dropdownList" value="topping.item_id">{{topping.item_name}}</mat-option>
            </mat-select>
        </mat-form-field>
    </label>

This is the model for "model"
input-form.model.ts

export class CustomFormInput{
    constructor(        
        public formGroup: FormGroup,
        public controlName: string, //Name of from control in form group
        public type: string, // type of input from enum FormType
        public editable: boolean, // placeholder for toggling
        public required: boolean,
        public label: string,
        public value: any = null,
        public list: BaseClass[] = [], // required only for dropdown and multiselect-dropdown types 
        public errorBanner: string = null, // displays if requirements are not met during entry and if attempted to save without entering specific fields default uses returned errors from validators
        public placeholder: string = null, // displays default place holder for Guiding examples only used for text and textbox
        public mask: string = null// ngx-mask expression see Masks
    ){};
};



Using initform and setfields I am calling the above multiselect dropdown in the html i am working on

this.topics=[{1,"orange"},{2,"apple"},{3,"grapes"},{4,"kiwi"}]
this.displayModel.educationTopics=[{1,"orange"},{2,"apple"}]

    initForm() {
        this.formGroup = this.fb.group({
            selectedTopicIds: new FormControl(''),
        });
    }

In EventMode.Create i am just displaying the dropdown values for user to select them. If its not create mode then I have to display what user selected in create mode and also give an option to select more. this.topics is the full drop down list and this.displayModel.educationTopics is the selected values in create mode  

    setFields() {
        if(this.EventMode ==EventMode.Create){
        this.fields = [
            new CustomFormInput(this.formGroup, 'selectedTopicIds', FormType.MultiSelectDropDown, false, false, 'Topic(s)',null, this.topics),
        ]
    }else{
        this.fields = [
            new CustomFormInput(this.formGroup, 'selectedTopicIds', FormType.MultiSelectDropDown, false, false, 'Topic(s)',this.displayModel.educationTopics, this.topics),

        ]
    }
        this.fields.forEach(ea => {
            let control = this.formGroup.controls[ea.controlName];
            if (control.value != null)
                control.setValue(ea.value);
         });
    }

In create mode [{1,"orange"},{2,"apple"}] are selected but I am having difficulty to display them selected in edit mode.

попытались передать только идентификаторы вместо идентификатора и имени, но это не помогло. попытался добавить [(ngModel)], но выдает ошибку, так как и formcontrol, и ngmodel не могут использоваться одновременно

...