How can I effectively link data to an Angular Material dropdown in Angular 5?

Essentially, I am updating a user profile with user information that needs to be bound to the corresponding fields.

    this.editOfferprice= new FormGroup({
        xyz : new FormControl(xxxx,[]),
        xxx: new FormControl(xxxx,[Validators.required]),
        wwwID : new FormControl(xxxx,[Validators.required]))};

The above code utilizes formgroup and formcontrol.

<mat-form-field fxFlex="49"> <mat-select placeholder="Select xxx" formControlName="xxx"> <mat-option *ngFor="let P of Pro" [value]="P.ID"> {{P.Name}} </mat-option> </mat-select> <mat-error *ngIf="editOffer.controls['xxx'].errors && editOfferprice.controls['xxx'].errors.required"> You must select Name</mat-error> </mat-form-field>

I am trying to figure out how to bind data to a dropdown.

angulartypescriptangular5dropdown

Answer №1

implement the [ngValue]

*ngFor="let P of Pro" [ngValue]="P.ID">

Answer №2

Utilize the ngModel for binding in the select element as shown below - 

<mat-form-field>
  <select matNativeControl [(ngModel)]="selectedOption" required>
    <option *ngFor="let P of Pro [value]="P.ID">{{P.Name}}</option>
  </select>
</mat-form-field>

Alternatively, if you prefer to use formControl, implement it like this -

[formControl]="yourControl"

Due to this issue in Angular, make sure to bind the formControl instance rather than using formControlName.

View the Working Example Here

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

Transition from using ReactDOM.render in favor of asynchronous callback to utilize createRoot()

Is there a React 18 equivalent of this code available? How does it handle the asynchronous part? ReactDOM.render(chart, container, async () => { //code that styles some chart cells and adds cells to a worksheet via exceljs }) ...

reactjstypescriptexceljsdevextreme-react

Recommendations for Configuring VPS for Angular2 and .Net Application

My team and I are currently in the process of developing an application that combines Angular2 for the front-end and Web API ASP.NET for the back-end. We are currently at the stage of configuring a VPS for this application but unfortunately, we lack the ...

javascriptasp.net-mvcangularconfigurationvps

Finding a way to reference multiple components within a mapping function

In order to set a ref to each project within the map function, I am trying to pass forwardRef from child to parent. At the moment, I am only able to get a single Project. However, I need to set refs to an array list so I can work with it. Below is what I h ...

javascriptreactjstypescript

When a URL is entered, information is not retrieved from the database

I have a simple app setup where the data (iPhones from the database) is fetched in the AppComponent itself. ngOnInit(): void { this.iphoneservice.fetchIphones(); } The fetchIphones method is located in my iPhoneService file and consists of 3 functio ...

javascriptangularfirebasefirebase-realtime-database

Angular component injected with stub service is returning incorrect value

While attempting to write tests for my Angular component that utilizes a service, I encountered an issue. Despite initializing my userServiceStub property isLoggedIn with true, the UserService property appears false when running the tests. I experimented ...

javascriptangularjasmine

When using the ionic 3 storage.get function, it may return a null value when accessed outside

In regards to storage, the function is returning a null value outside of the function. Below is the code snippet: username:any; this.storage.get('user').then((value) => { this.username = value; }); console.log(this.username); Ou ...

angulartypescriptionic3

Troubleshooting Problem in Angular 6: Difficulty in presenting data using *ngFor directive (data remains invisible)

I came across a dataset that resembles the following: https://i.sstatic.net/S0YyO.png Within my app.component.html, I have written this code snippet: <ul> <li *ngFor="let data of myData">{{data.id}}</li> </ul> However, when I ...

angulartypescriptangular6

Exploring the integration of traditional service methodologies into modern Angular applications

I am tasked with converting various types of services like SOAP-based services, WCF XML services, and web services that are currently running in a Silverlight app. For this conversion, we plan to use Angular as the front end while keeping the server side u ...

c#.netangularwcfsilverlight

The Angular 4 framework is a powerful tool for web development, offering

While attempting to iterate over an array, I noticed that the DOM is displaying [ object Object] instead of the desired information. Some sources suggested using Stringify to display the info, but it's not possible to iterate over a string. Any assist ...

arraysangularhttpobservablebitcoin

detect the dismissal event in the modal controller from the main component

Within my MainPage, I invoke the create function in the ModalController, which displays the ModalPage. Upon clicking cancel, the dismiss function is called and we are returned to the MainPage. The process functions as expected. @Component({ selector: &a ...

angulartypescriptionic2ionic3

Structured similar to a map with typed elements

As a beginner in Typescript, I am delving into creating a typed map structure where the values are associated with specific keys. This can be demonstrated through pseudo JS code without types: const propertyA = "PropertyA"; const propertyB = "PropertyB"; ...

typescript

Angular 8: Implementing Form Validation with a Boolean Flag

Within my HTML code, I have a function (change)="limitUser($event)". In Typescript, I utilize a for loop to iterate through each element and determine if the value is less than 10. If it exceeds 10, the inValid = true condition is set. All form fields in m ...

htmlangulartypescriptvalidationangular8

Is it necessary to unsubscribe within the subscribe callback function?

I've been searching for a straightforward solution to prevent memory leaks caused by not unsubscribing. Most of the time, I only need one response from the backend and then I want to unsubscribe. So why not call it within the callback? onSubmit(){ ...

angularrxjs

Steps to fix: "Rule '@typescript-eslint/consistent-type-assertions' is missing a definition"

My React app is failing to compile because it can't find the rule definition for '@typescript-eslint/consistent-type-assertions'. I'm feeling quite lost at the moment. I can't seem to locate any current rule definitions within the ...

reactjstypescriptnpmcreate-react-apptypescript-typings

What external libraries does Angular 4 utilize during execution, aside from RxJS?

Angular 4 relies on RxJS types in its public API and also internally depends on RxJS. It would be beneficial to explore if Angular utilizes other external packages for certain functionalities, allowing us to incorporate them into our own projects. This ap ...

javascriptnode.jsangulartypescriptrxjs

The error code TS2474 (TS) indicates that in 'const' enum declarations, the member initializer must be a constant expression

Error code: export const enum JSDocTagName { Description = "desc", Identifier = "id", Definition = "meaning", } Implementing Angular 6 in conjunction with the .NET framework. ...

.netangulartypescript

Using a forward slash '/' to navigate to a specific URL

When routing to a page, I encounter an issue with sending IDs that may contain slashes '/'. This poses a problem because the route will change as a result. For example: somepage/my-id/2f On the destination page, I need to be able to interpret t ...

angular

Centralized MUI design for varying screen dimensions

I am struggling to perfectly center my modal box in the middle of the screen. The problem arises when the screen size changes, causing the box to be misaligned. I attempted using top:50% and left: 50%, but this did not effectively center the box. center ...

typescriptmaterial-uimodal-dialogtsx

Encountered an issue during the transition from Angular 7 to Angular 9

After following the advice in the second response of this discussion, I successfully upgraded to Angular 9. However, I am now encountering an issue in the browser console when running my project. https://i.sstatic.net/esAXf.png Package.json "dependencie ...

angulartypescriptivy

Dealing with a sequence of deletions in Angular 4

When working with a ReplaySubject of size 3 and a delete chain that must be in order, I encountered an issue. After the deletion process is completed, I need to redirect the user. However, when subscribing to this ReplaySubject method, it sends "here fin ...

angularsubject