In Angular, when using multiple-selection mode in mat selection, the Error Value should always be in the form of

**Everything is working fine except for one error in the console. How can I remove this error? Can anyone please help me? Save, Edit, and searching are working perfectly fine. **

public campaignCategoryFormGroup$: FormGroup = this.fb.group({
    // 'categoryGroupId': [{ value: '', disabled: true }, [
    //  Validators.required
    // ]],
    'categoryId': [[], [Validators.required]],
    'subCategoryId': [[], [Validators.required]],
});

    public campaignCategoryForm: FormArray = this.fb.array([
    this.campaignCategoryFormGroup$
]);
<div class="col s4">
   <app-mat-select-search multiple (selectionChange)="onSelectCategory($event.value, true, false)"
   [label]="'CATEGORY_ID' | translate: lang" [list]="categoryList" valueField="categoryId"
   [myFormControl]="campaignService.campaignCategoryFormGroup$.controls['categoryId']"
   [requiredMsg]="'REQUIRED' | translate:lang"
   [searchPlaceholder]="'CATEGORY_SEARCH_PLACEHOLDER' | translate: lang" [isInactive]="true" [isRequired]="true"
   [noResultsLabel]="'CATEGORY_SEARCH_NOT_FOUND' | translate: lang" displayField="categoryName">
   </app-mat-select-search>
</div>
<div class="col s4">
   <app-mat-select-search multiple [label]="'SUB_CATEGORY_ID' | translate: lang" [list]="subCategoryList"
   valueField="subCategoryId"
   [myFormControl]="campaignService.campaignCategoryFormGroup$.controls['subCategoryId']"
   [requiredMsg]="'REQUIRED' | translate:lang"
   [searchPlaceholder]="'SUB_CATEGORY_GROUP_SEARCH_PLACEHOLDER' | translate: lang" [isInactive]="true"
   [isRequired]="true" [noResultsLabel]="'SUB_CATEGORY_GROUP_SEARCH_NOT_FOUND' | translate: lang"
   displayField="subCategoryName">
   </app-mat-select-search>
</div>

https://i.sstatic.net/MoX4P.png

core.js:1673 ERROR Error: Uncaught (in promise): Error: Value must be an array in multiple-selection mode. Error: Value must be an array in multiple-selection mode.

angulartypescript

Answer №1

numerous

<app-mat-select-search numerous [label]="'SUB_CATEGORY_ID' | translate: lang" [list]="subCategoryList">

alternatively

[several]="true"

<app-mat-select-search [several]="true" [label]="'SUB_CATEGORY_ID' | translate: lang" [list]="subCategoryList">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Should Errors be Handled in the Service Layer or the Controller in the MVC Model?

Currently, I am in the process of developing a Backend using Express and following the MVC Model. However, I am uncertain about where to handle errors effectively. I have integrated express-async-errors and http-errors, allowing me to throw Errors anywher ...

javascriptnode.jstypescriptexpresserror-handling

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

I am looking to create a mono repository that includes the following elements: shared: a collection of TypeScript classes that are universally applicable WebClient: a react web application in JavaScript (which requires utilizing code from the shared folde ...

javascriptnode.jsreactjstypescriptwebpack

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Is there a way to import a $lib into my svelte project without encountering typescript errors in vscode? The project is building and running smoothly. import ThemeSwitch from '$lib/ThemeSwitch/ThemeSwitch.svelte'; The error message says "Canno ...

typescriptvisual-studio-codesveltesveltekit

Angular: Incorporating a custom validation function into the controller - Techniques for accessing the 'this' keyword

I'm currently working on implementing a custom validator for a form in Angular. I've encountered an issue where I am unable to access the controller's this within the validator function. This is the validator function that's causing tr ...

javascriptangulartypescript

Deleting a key from a type in TypeScript using subtraction type

I am looking to create a type in TypeScript called ExcludeCart<T>, which essentially removes a specified key (in this case, cart) from the given type T. For example, if we have ExcludeCart<{foo: number, bar: string, cart: number}>, it should re ...

reactjsgenericstypescriptdecoratorhigher-order-components

What steps can be taken to resolve the issue with Angular routing?

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {HomeComponent} from "./home/home.component"; import {SettingsComponent} from "./settings/settings.component"; ...

javascriptnode.jsangular

Can you explain the functionality of this Observable in the context of this Angular 2 example?

I'm not too familiar with JavaScript/TypeScript and I have a question about how this code snippet works: onGet() { this.serverService.getServers() .subscribe( (servers: any[]) => this.servers = servers, // an array of anythin ...

javascriptangulartypescriptjavascript-frameworkangular2-observables

Utilize Typescript to ensure uniformity in object structure across two choices

Looking to create a tab component that can display tabs either with icons or plain text. Instead of passing in the variant, I am considering using Typescript to verify if any of the icons have an attribute called iconName. If one icon has it, then all othe ...

typescripttypescript-typings

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

javascriptreactjstypescriptmaterial-ui

Tips for utilizing parameters within SQL Server

Hello everyone! I am new to SQL Server in Azure functions using Typescript. I am currently facing an issue while trying to update a row in the database using declared variables, particularly with VARCHAR types. Strangely, it works fine in the database tool ...

sqltypescriptazure-functionssql-injection

Angular Material design failing to display properly

Despite following the Angular Material guide on their website, I am still unable to see the gestures and design properly. I have meticulously followed all the steps outlined in the Angular Material guide. HTML <mat-radio-group> <mat-radio-but ...

angularnpmangular-material

TypeScript function object argument must be typed appropriately

In the code, there is a function that I am working with: setTouched({ ...touched, [name]: true }); . This function accepts an object as a parameter. The 'name' property within this object is dynamic and can be anything like 'email', &ap ...

reactjstypescript

Can TypeScript support passing named rest arguments within the type declaration?

Using Tuple types in TypeScript enables us to create typesafe rest arguments: type Params = [string,number,string] const fn = (...args: Params) => null // Type is (args_0: string, args_1: number, args_2: string) => null Is there a method to assign ...

typescript

What is the reason behind the Partial input basic type returning itself?

Snippet of code excerpt: type PartialType<T> = { [P in keyof T]?: T[P]; } I am curious about why the PartialType input basic type (such as string returning string) returns itself instead of throwing an error or an object. // undef => undefined t ...

typescript

Methods for assigning values to a formControl using an array

I have an array of objects and I am attempting to loop through the array, dynamically setting values to a formControl and not displaying anything if the value is null. I have searched for similar solutions but haven't found any references or examples ...

javascriptangulartypescript

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type? In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email" const payload = '{&quo ...

typescript

Setting options using the form group in dropdowns in Angular can greatly enhance the user experience

I have created a FormGroup called holidayform and set it up as follows: holidayform: FormGroup; this.holidayform = this.fb.group({ title: ['', [Validators.required]], entryDate: ['',], }) this.holidayform.patchValue ...

angulartypescript

A guide on simulating x-date-pickers from mui using jest

I have successfully integrated a DateTimePicker into my application, but I am facing an issue with mocking it in my Jest tests. Whenever I try to mock the picker, I encounter the following error: Test suite failed to run TypeError: (0 , _material.gen ...

node.jstypescriptunit-testingjestjsmaterial-ui

Angular 2 does not recognize the existence of .then in type void

I have a query regarding Angular2 and I'm struggling with the void function in my code. Can someone help me out? I am new to Angular2 and unsure of what needs to be added in the void function. Check out this image for reference export class PasswordR ...

angulartypescript

Tips for storing the device token received from Firebase Cloud Messaging in an Ionic2 application

Using the FCM plugin for ionic2, I was able to successfully implement push notifications. For reference, you can check out the plugin here. I followed the steps outlined in this Github repository, and everything is working smoothly so far. Now, my next go ...

angularcordovatypescriptionic2ionic3