Having Default Value in Select Option In Reactive Forms

Question

How can i have a default value according to what i already selected before. Like if i edit something and it has a dropdown, i can see the default value that i have submitted before so it won't confused the users. For example, in my code if i click the edit button it would redirect me to the page and would start the "patchValues()" function below and it would able to select from the lists of suppliers. What i want is that if i click the edit button, i can see a default value in the select option

TS

patchValues() {
    let suppliers = this.myForm.get('suppliers') as FormArray;
    this.material.suppliers.forEach(supplier => {
      suppliers.push(this.fb.group({
       supplier_id: supplier.name,
     }))
    })
  }

HTML

<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i">
            <td>
              <select formControlName="supplier_id" class="col-md-12" >
                <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
                  {{supplier.name}}
                </option>
              </select>
            </td>
   </tr>

@RahulSingh. I mean you have a default value in select option. Like the word "Please select supplier" — Joseph, Nov 18 '17 at 18:14

score 5 · Accepted Answer · answered Nov 19 '17 at 09:10

5

Hopefully I'm understanding your question correctly. You would have a default option, in case that field has no pre value:

<option value="">Select supplier...</option>
<option *ngFor="let supplier of suppliers"  [ngValue]="supplier.id">
  {{supplier.name}}
</option>

and in your patchValues you would seem to want to push the actual id instead of name:

this.material.suppliers.forEach(supplier => {
  suppliers.push(this.fb.group({
   supplier_id: supplier.id
 }))

Now if there is no supplier id, the default option "Select supplier..." would be chosen if the supplier id is an empty string. If it's not an empty string you need to adjust your template accordingly, for example if the value were to be null, you'd want to do:

<option value="null">Select supplier...</option>

answered Nov 19 '17 at 09:10

AT82

71,416
24
140
167

supplier_name is correct. Since i want to display the name of supplier when i click edit in the select option. The problem is that i want to display the name of supplier or load name of supplier in the select option after i click edit. – Joseph Nov 19 '17 at 09:23
Where do you click `edit`? There is no such code in your question. Please create a demo that showcases the issue you are facing. Now we are just guessing how your code looks like, for example where and what `material` is/has come from. – AT82 Nov 19 '17 at 09:25
Yes there is no edit here. This code is where i load the data after i click the edit. It shows the materials and the supplier option. The problem is the supplier selection Only where can i select suppliers. It also has a default value of supplier name as a result of the edit function. – Joseph Nov 19 '17 at 09:43
It's really hard to help just based on text and not knowing the flow that is going on here. Please create a simple demo that showcases the issue and I'm happy to take a look. – AT82 Nov 19 '17 at 09:51
Yes i understand. Ok thanks a lot @AJT_82 . Ill create a demo later on stackblitz – Joseph Nov 19 '17 at 09:52
Is this what you want? Then you need to change the `[value]` to `supplier.name` instead? https://stackblitz.com/edit/angular-ujvxvv?file=app/app.component.ts – AT82 Nov 19 '17 at 09:54
Yes ive changed it to supplier.name but how can i send it to the backend just the supplier.id? You are nearing the correct answer – Joseph Nov 19 '17 at 13:21
It is correct since when i click the edit, it loads now the supplier.name but i want the supplier.id only to pass it to the backend – Joseph Nov 19 '17 at 13:22
Here again I don't understand why the answer I provided wouldn't work: https://stackblitz.com/edit/angular-vge5yb?file=app/app.component.ts But then again, like I mentioned earlier we don't know what values you have for example in the `material` array, so I am just guessing here ;) – AT82 Nov 19 '17 at 13:26
I mean you’re answer is somewhat correct. I mean i want the supplier.name to be displayed to the select option but i want the supplier.id to be passed to the backend – Joseph Nov 19 '17 at 13:38
Could you please fork my demo and showcase the issue there, I mean the latter demo has the id stored instead, like you seem to want. Much easier to help if you apply your actual code instead of me just guessing what values you have if my suggested solution does not help in your case :) – AT82 Nov 19 '17 at 13:39
Here it is. Please see also comments in there. https://stackblitz.com/edit/angular-jpwrxf?file=app/app.component.ts – Joseph Nov 19 '17 at 14:01
Well I again come back to the demo I made, what is wrong with it? :D I forked your demo: https://stackblitz.com/edit/angular-174cj4?file=app/app.component.ts This demo is just like the one I made and the answer I provided? https://stackblitz.com/edit/angular-vge5yb?file=app/app.component.ts – AT82 Nov 19 '17 at 14:10
Yes. You got it. Sorry ajt. Thanks a lot for always helping me and sorry for the confusion. Thank you – Joseph Nov 19 '17 at 14:16
No problem, glad we got to the correct answer though, even if there were some confusion :P Have a nice end of the weekend! :) – AT82 Nov 19 '17 at 14:17
Same to you. Goodluck – Joseph Nov 19 '17 at 14:20

score 2 · Answer 2 · answered Nov 18 '17 at 18:25

2

You can try some thing like this

<form [formGroup]="test">
    <div class="col-sm-6 form-group">
        <label>Industry</label>
        <select class="form-control select" formControlName="Industry">
      <option [selected] = "true == true" [ngValue] = "0"> Please Select</option>
      <option *ngFor="let industry of industries"  [ngValue]="industry.id">{{industry.name}} </option>  
</select>
    </div>
</form>

Working Example

answered Nov 18 '17 at 18:25

Rahul Singh

19,030
11
64
86

How about when i want a default value of the supplier like this {{row.value.supplier_id}} – Joseph Nov 19 '17 at 04:06
make the selected point to that particular element instead of `true = true` – Rahul Singh Nov 19 '17 at 06:08
I'm sorry i don't understand what you said. I've tried BUT, it duplicates the lists of suppliers from the dropdown. Can you edit your code pls? Thanks – Joseph Nov 19 '17 at 09:07
@Joseph you are using static paths where as when the components loads up in the main router outlet the path changes to this `https://angular-vha6xw.stackblitz.io/hello-world/(hello-outlet:hellocontent)` and the outlet cannot find hellocontent for this the path has to be hello-world/hellocontent – Rahul Singh Nov 19 '17 at 14:48

Milo · Answer 3 · 2017-11-18T18:25:34.743

You could have a variable private selectedSupplierId that you track with (change) event on the select. You could bind that to [(ngModel)]="selectedSupplierId" to have it set when Edit mode is activated.

For example:

HTML:

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" >
    <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
          {{supplier.name}}
     </option>
</select>

TS:

private selectedSupplierId: any; //specify type if you can

private onSuppChange(value): void {
    this.selectedSupplierId = value;
}

EDIT: If you want a placeholder...

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" >
    <option value="-1">Placeholder text..</option>
    <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
          {{supplier.name}}
     </option>
</select>

After the foreach in patchValues() set supplier.id = -1.

Credits Baconbeastnz's answer

Thanks for this. But my problem is when i click the edit button, the select option has the default value in it. It loads the value from the details. — Joseph, Nov 18 '17 at 17:36
How about when i want a default value of the supplier like this {{row.value.supplier_id}} — Joseph, Nov 19 '17 at 04:06
@Joseph You can bind it with `[(ngModel])` property in place of `selectedSupplierId` in my example and then you can set it where ever `row.value.supplier_id=#` — Milo, Nov 19 '17 at 05:00

Having Default Value in Select Option In Reactive Forms

3 Answers3