How can I bind select dropdown in angular2 using formBuilder?

Question

I've done some research and I'm surprised to know it's not as straight-forward as it should be.

I know there are some approaches using ngModel. Like Bind and fetch dropdown list value in typescript and Angular2 and others. But I want to be able to easily bind my selected option to my formControlName var.

This is what I have tried:

.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]="hola">{{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. But when I choose BB, the default value is still selected. Same happens when default value is ''

This approach is suggested by Harry-ninh in Bind Select List with FormBuilder Angular 2

What am I doing wrong?

Note: of course, there are other inputs in form, just ignored them for the sake of simplicity.

EDIT

I tried using the exact same example in this plunkr and it does not work either. http://plnkr.co/edit/Rf9QSSEuCepsqpFc3isB?p=preview After form is sent, it shows that value has not been touched.

debug info

Have you checked this link

The Hungry Dictator
– The Hungry Dictator

2017-05-01 06:02:37 +00:00
Commented May 1, 2017 at 6:02 — The Hungry Dictator
– The Hungry Dictator, Commented May 1, 2017 at 6:02

The Hungry Dictator · Accepted Answer · 2017-05-01 07:00:20Z

6

Hi I please do as following

<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>

and

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

And I have also created working plunkr.

Hope this will help you

edited May 1, 2017 at 7:00

answered May 1, 2017 at 6:10

The Hungry Dictator

3,4845 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joan Gil Over a year ago

Thanks for your answer. Know I see why it did not work. Even when this works perfectly in the plunkr you provided. But I have a little issue here... Property 'name' does not exist on type '{ name: string; }[]' It does not make any sense at all because when I inspect pref var, it clearly says it has a property named "name", why could be happening there?

The Hungry Dictator Over a year ago

Have you updated your code? If yes then can you update what you have tried over here? And also post screenshot of your error.

Collectives™ on Stack Overflow

How can I bind select dropdown in angular2 using formBuilder?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related