Angular: selected directive on input not working

Question

I have the following select in my template:

   <select class="form-control" formControlName="tipo" name="tipo">
       <option value="" selected disabled>(Select an option)</option> 
        <option value="FACT">Factura</option>
        <option value="NOCRE">Nota Crédito</option>
   </select>

however, despite I have put the selected directive to the first one, it does not show if the user does not click the select. It behaves like another option tag.

How can I make this option visible when the component loads without user interaction?

Adrita Sharma · Accepted Answer · 2019-10-23 16:11:41Z

2

Since value is "" for 'Select..' option, set value "" in it's formcontrol

Working Demo

Try like this:

this.yourForm= new FormGroup({
    'tipo':new FormControl(''),
});

edited Oct 23, 2019 at 16:11

answered Oct 23, 2019 at 15:49

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

Comments

Abderrahim Soubai-Elidrisi · Accepted Answer · 2019-10-23 16:00:48Z

0

why not Adding a model :

in your class :

tipo: string = "";

in HTML :

 <select [(ngModel)]="tipo" class="form-control">
       <option value="" selected disabled>(Select an option)</option> 
        <option value="FACT">Factura</option>
        <option value="NOCRE">Nota Crédito</option>
   </select>

edited Oct 23, 2019 at 16:00

answered Oct 23, 2019 at 15:54

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

3 Comments

Adrita Sharma Over a year ago

Reactive form and Template driven form shouldn't be mixed

Abderrahim Soubai-Elidrisi Over a year ago

Some else hate me Hahaha

Adrita Sharma Over a year ago

Haha.. Check my answer in this: (Downvote for no reason) stackoverflow.com/questions/58009811/…

Collectives™ on Stack Overflow

Angular: selected directive on input not working

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related