What is the best way to associate a select dropdown with a form in Angular 2 using formBuilder

Question

What is the best way to associate a select dropdown with a form in Angular 2 using formBuilder

After conducting some research, I was surprised to find that the process is not as straightforward as I had expected.

I have come across various methods using ngModel, such as Bind and fetch dropdown list value in typescript and Angular2, among others. However, I am looking for a way to easily bind my selected option to my formControlName variable.

This is what I have attempted:

.HTML

 <form id="myForm" name="father" [formGroup]="fatherForm" (ngSubmit)="createFather()">
     <div class="row">
         <select formControlName="pref" id="f">
              <option value=null disabled selected>Prefijo</option>
              <option *ngFor="let item of prefs" [ngValue]="hello">{{item.name}}</option>
          </select>

      </div>
 </form>

.TS

fatherForm: FormGroup;  

this.fatherForm = this.formBuilder.group({
          pref: ['AA']
});

 this.prefs=[
     {name: "AA"},
     {name: "BB"}
  ];

The default value works. However, when I choose 'BB', the default value remains selected. The same issue occurs when the default value is set as an empty string.

This method is recommended by Harry-ninh in Bind Select List with FormBuilder Angular 2

What could be the mistake in my implementation?

Note: there are other form inputs present, but they have been omitted for simplicity's sake.

EDIT

I also attempted to replicate the exact same example in this Plunkr, but it did not work either. http://plnkr.co/edit/Rf9QSSEuCepsqpFc3isB?p=preview Upon submitting the form, it shows that the value has not been altered.

angular typescript angular2-formbuilder

Answer 1

Answer №1

Greetings! Please follow these instructions:

<form id="myForm" name="father" [formGroup]="fatherForm">
   <div class="row">
     <select formControlName="pref" id="f">
          <option value=null disabled selected>Prefijo</option>
          <option *ngFor="let item of prefs" [value]="item.name">{{item.name}}</option>
      </select>

  </div>
   <button type="submit">Submit</button>
</form>
<p>Value: {{ fatherForm.value | json }}</p>

Additionally, use the following code snippet:

name:string;
fatherForm : FormGroup;
prefs=[
 {name: "AA"},
 {name: "BB"}
];
constructor(fb:FormBuilder) {
  this.fatherForm = fb.group({
    pref : [this.prefs.name]  
 });
}

You can also view a working example on Plunkr.

I hope this information proves useful to you.

Answer 2

Greetings! Please follow these instructions:

<form id="myForm" name="father" [formGroup]="fatherForm">
   <div class="row">
     <select formControlName="pref" id="f">
          <option value=null disabled selected>Prefijo</option>
          <option *ngFor="let item of prefs" [value]="item.name">{{item.name}}</option>
      </select>

  </div>
   <button type="submit">Submit</button>
</form>
<p>Value: {{ fatherForm.value | json }}</p>

Additionally, use the following code snippet:

name:string;
fatherForm : FormGroup;
prefs=[
 {name: "AA"},
 {name: "BB"}
];
constructor(fb:FormBuilder) {
  this.fatherForm = fb.group({
    pref : [this.prefs.name]  
 });
}

You can also view a working example on Plunkr.

I hope this information proves useful to you.

What is the best way to associate a select dropdown with a form in Angular 2 using formBuilder

Answer №1

Similar questions

Implementing Firebase with Angular 4 Material for Autocomplete Feature

Pattern matching to eliminate line breaks and tabs

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

Ensuring Angular applications can effectively run on Internet Explorer

Angular 2: Retrieve current currency rates based on your location

Only include unique objects in the array based on a common property

"What is the best way to calculate the total value of an array in TypeScript, taking into account the property

The discord.js TypeScript is throwing an error stating that the 'index.ts' file is missing when trying to run 'ts-node index.ts'

Exploring the wonders of accessing POST request body in an Express server using TypeScript and Webpack

Angular reactive form encountered an issue with an incorrect date being passed

I need help figuring out how to incorporate dynamic checkboxes in Angular

When transmitting an ajax POST FormData object, the key and value may not be transmitted as originally configured

Tips for validating email addresses and enforcing minimum length requirements

Is there a way to execute the run function of a different Component in Angular 7 without causing the current

Converting JSON to TypeScript with Angular Casting

Guide on creating frozen columns in an Angular 2 table with the ability to scroll through multiple columns

The subsequent menu selection will be based on the chosen menu value

What is preventing me from setting the User object to null in my Angular application?

Implementing asynchronous data sharing within an Angular 2 service

Guide to vertically aligning text in an overlay using CSS within Angular 2