1

I can't get the multi-select data to populate, but the single select one works. Directed below is the HTML for the single select part that displays pre-populated data that works

            <h2>Current Type:</h2>
            <ng-select 
                class="type-select" 
                bindLabel="type" 
                bindValue="type"
                [placeholder]="'Change type(s)'" 
                formControlName="type">
                    <ng-option *ngFor="let type of types" [value]="type">{{type}}</ng-option>
                </ng-select>

below is the html for the multi select part that doesnt work

<form [formGroup]="category">
        <div>
            <div>
                Parent Categories
            </div>
            <div>
                <div*ngFor="let category of newCategory.controls.categories.controls">
                    {{category.controls.slug.value.slug}}
                </div>
            </div>

            <div>
                <ng-select 
                class="parent-select" 
                bindLabel="categories" 
                bindValue="categories" 
                [multiple]="true" 
                formControlName="parent-categories" >
                    <ng-option *ngFor="let category of categories"> {{category.title}}</ng-option>
            </div>
        </div>
    </form>
    <form [formGroup]="subcategory">
        <div>
            <div>
                Sub-categories
            </div>
            <div>
                <ng-select class="sub-select" bindLabel="sub-categories" bindValue="subcategories" [hideSelected]="true" [multiple]="true" 
                     formControlName="subcategories">
                    <ng-option *ngFor="let subcategory of categories" [value]="subcategory"> {{subcategory.title}}</ng-option>
                </ng-select>
            </div>
        </div>
    </form>

and this is the TS file


export class CategoryComponent implements OnInit {
    controls: any;

    constructor(
        private ngxSmartModalService: NgxSmartModalService,
        private categoryService: CategoryService,
        private fb: FormBuilder
    ) { }
    @Input() 
    selectedCategory: Category;
    categories: Category[];
    newCategory = this.fb.group({
        enTitle: [''],
        frTitle: [''],
        enDesc: [''],
        frDesc: [''],
        type: [''],
        slug: [''],
        categories: this.fb.array([]),
        subcategories: this.fb.array([])
    });
    category = this.fb.group({
        slug: ['']
    })
    subcategory = this.fb.group({
        chosenSub: this.fb.array([])
    })
    types = Object.values(CategoryType);
    

    ngOnInit(): void {
        this.categoryService.query().subscribe({
            next: categories => {
                this.categories = categories
            }
        })

I thought maybe it only worked with a string, and not an array because the displayed input box only takes strings? Not sure though

wahhhh
  • 41
  • 3

0 Answers0