Angular 5.2: Component type does not contain the specified property

In my Formbuilder.Group method, I have included the properties as shown in the following TypeScript code:

this.form = this.fb.group({          
        caseNumber: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern('^[a-zA-Z0-9]*$')]],
        userName: ['', [Validators.required]],

Within the Info Interface ts file, the structure is defined as follows:

   export interface Information {
    userName : string 
    caseNumber: string
}

To assign values to variables, I am using the patch value method in the following TypeScript code:

Info: Information;

         this.form.patchValue({
            caseNumber: this.Info.caseNumber,
            userName: this.jsonArrayvalues(this.Info.userName, this.dropdownListForUserName),

Furthermore, these properties are utilized in the HTML file as demonstrated below:

 <div class="form-group padding-top-bottom" [ngClass]="{'has-error': (form.get('userName').touched ||
                                              form.get('userName').dirty) &&
                                              !form.get('userName').valid }">
                                <label class="col-md-4" for="firstNameId"><span tooltip={{attributeNames.userNameTitle}} data-placement="right">Vendor Name</span></label>
                                <div class="col-md-7">
                                    <ng-select [items]="userName"
                                               multiple="true"
                                               [addTag]="true"
                                               bindLabel="itemName"
                                               (change)="onItemSelect($event,'user','userName')"
                                               formControlName="userName"
                                               [(ngModel)]="userName">
                                    </ng-select>

When attempting to run the command ng build --prod, an error arises:

ERROR in src\app\components\new\new.component.html(161,48): : Property 'userName' does not exist on type 'NewComponent'.

However, the same operation executes without errors when using ng build.

Answer №1

<ng-select [items]="userName"
...
</ng-select>

requires an array for the items property, which does not appear in the code you provided.

Additionally, it is advisable to name it "userNames" since it is supposed to be an array.

<ng-select [items]="userNames" //!!! array
...
</ng-select>

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

jQuery eliminates the placeholder text in a textarea once the textarea text has been cleared

I'm dealing with a Bootstrap modal that contains a textarea. My goal is for the textarea to be empty every time the modal is opened. However, I've run into an issue where using $('textarea').val('') to clear the text also rem ...

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

I'm currently working on a project where I need to extract specific objects from a JSON based on an array and then display this data in a table. Here's how my situation looks: playerIDs: number[] = [ 1000, 1002, 1004 ] The JSON data that I am t ...

In Angular, how do outputs impact parents when data consistently travels down from the root?

I have a question that may seem simple, but I am really trying to understand unidirectional data flow in Angular thoroughly. If change detection always happens from top to bottom, how does @Output impact a parent component? Could I be mistaken in my assu ...

Setting up `ng serve` to detect changes in a containerized Angular 2 application

Currently, I am 'dockerizing' an existing Angular 2 application that is being run on angular-cli version 1.0.0-beta.31. I am facing difficulties in configuring ng serve to automatically reload my app whenever a file in the working directory is u ...

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

The AJAX call for fetching logged in users is coming back as undefined

Hey there! I'm currently diving into the world of AJAX and am working on enhancing the user experience on my admin system. One thing I want to achieve is to update information like online users, messages, tasks, etc. every 30 seconds or so (for testin ...

Trouble with Bootstrap accordion staying open even after a different one is chosen

Looking for assistance! I am encountering an issue with using jQuery on Bootstrap. The accordion feature is not functioning correctly as it fails to collapse when another section is selected. https://i.stack.imgur.com/uiZPh.png The problem arises when th ...

How to Retrieve an Array from a Promise Using Angular 4 and Typescript

I am encountering difficulties when trying to store data from a returned promise. To verify that the desired value has been returned, I log it in this manner: private fetchData() { this._movieFranchiseService.getHighestGrossingFilmFranchises() ...

Angular 2 Aot Issue: CRITICAL ERROR: CALL_AND_RETRY_LAST Allocation unsuccessful - JavaScript heap exhausted

Encountered an issue while running Angular 2 AOT rollup: <--- Last few GCs ---> 144518 ms: Mark-sweep 1317.0 (1404.4) -> 1317.0 (1404.4) MB, 1522.9 / 0.0 ms [allocation failure] [GC in old space requested]. 146029 ms: Mark-sweep 1317.0 (1404 ...

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

The Formik and React error is indicating that the '{ refetch: any; }' type is absent

When attempting to pass a prop down to my EmailSignupScreen, I encountered an error message. This issue arose while experimenting with Formik and Typescript. "message": "Type '{ refetch: any; }' is missing the following properties from type &apo ...

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made usi ...

What causes the app to crash in release mode when importing a TypeScript component, while no issues arise in debugging?

Having an issue with importing a bottom sheet written in typescript into a class component. It works correctly in debugging mode but unfortunately not in release mode. Despite checking the logcat, no readable error code or message is being printed. Even a ...

retrieve a shared string from an array when toggled

Regarding the use of SelectionModel for mat-checkbox, a function is called on each click: toggleSelection(row) { this.selection.toggle(row); console.log("Selection"); console.log("this", this.selection.selected); this.selection.selected.f ...

What is the best way to create a JQuery function that fills a div based on the selected option from an HTML select

Check out this simple JavaScript function below. <html> <head> <script> $(document).ready(function() { $.get('getImage.php', function(data) { $('#imageSelector').html("<select>" + d ...

The chosen element contains a value of -1

When the select element has a selected value of 4, form data is sent to the server and the controller returns a partial view. <script> $(document).ready(function () { var objSel = document.getElementById("IDVacationApplicationTyp ...

Click to switch CodeMirror's theme

http://jsbin.com/EzaKuXE/1/edit I've been attempting to switch the theme from default to cobalt and vice versa, toggling each time the button is clicked. However, I am facing an issue where it only switches to the new theme once and doesn't togg ...

Is getElementById in JavaScript reliable for multiple calls?

I am attempting to create a table cell that transforms into a textbox upon clicking, allowing for input to be entered and then displayed in the cell. Below is my JavaScript function: $(".cellConsigne").click(function () { var numId = this.id.substrin ...

Error: Incorrect data type found in React Route component

I've encountered an issue while attempting to utilize the Route component in my application. The error message I'm receiving reads as follows: [ts] Type '{ path: "/:shortname"; component: typeof FirstComponent; }' is not assignable ...