Setting default static value in select option

Question

I have a problem with setting a default value of select tag. Here is my some snippet:

<select class="form-control" id="field_company" name="company" formControlName="company">
    <option value="null" [selected]="true"> {{ 'khanbankCpmsApp.company.default' | translate }}</option>
    <option
        [ngValue]="companyOption.id === editForm.get('company').value?.id ? editForm.get('company').value : companyOption"
                *ngFor="let companyOption of companies;"
    >
       {{ companyOption.name }}</option>
</select>

When it's default by that static value should be displayed on select. But result is:

What did i do wrong ? any advice ?

Can you see what's the resulting value, by inspecting the elements via the developer tools? — johey
– johey, Commented Jun 10, 2019 at 12:01

Kishan Bharda · Accepted Answer · 2019-06-10 12:28:20Z

1

You are using a reactive form, so you need to set the FormControl into your formGroup like.

<form [formGroup]="companyGroup">
    <select class="form-control"  name="company" formControlName="company">
        <option value="1"> One </option>
        <option value="2"> Two </option>
        <option value="3"> Three </option>
    </select>
</form>

and .ts file contains the

export class HelloComponent implements OnInit {
  @Input() name: string;
  companyGroup: FormGroup;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.companyGroup = this.fb.group({
      company : ''
    })
    this.companyGroup.get('company').patchValue('2');
  }
}

Demo link Here

edited Jun 10, 2019 at 12:28

Kishan Bharda

5,7314 gold badges36 silver badges60 bronze badges

answered Jun 10, 2019 at 12:17

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

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

1 Comment

Avin Kavish Over a year ago

what, this is exactly same as my answer

Avin Kavish · Accepted Answer · 2019-06-10 12:19:21Z

1

Since you are using a reactive form, you should set the default value in the reactive form so that the correct option gets selected by the framework.

editForm = this.fb.group({ 
  name: [null, [Validators.required]], 
  status: [null, [Validators.required]], 
  dueDate: [], loanAmount: [], grantsOpenUntil: [], 
  users: [], 
  company: ['khanbankCpmsApp.company.default'], 
  });

<select class="form-control" id="field_company" name="company" formControlName="company">
    <option [ngValue]="'khanbankCpmsApp.company.default'"> {{ 'khanbankCpmsApp.company.default' | translate }}</option>
    <option
        [ngValue]="companyOption.id === editForm.get('company').value?.id ? editForm.get('company').value : companyOption"
                *ngFor="let companyOption of companies;"
    >
       {{ companyOption.name }}</option>
</select>

edited Jun 10, 2019 at 12:19

answered Jun 10, 2019 at 12:05

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

4 Comments

batgerel.e Over a year ago

where that company gets from ?

Avin Kavish Over a year ago

company is your formControlName.. formControlName="company". If you use formbuilder it must be something like. fb.group({ company: [null, ...] })

batgerel.e Over a year ago

editForm = this.fb.group({     name: [null, [Validators.required]],     status: [null, [Validators.required]],     dueDate: [],     loanAmount: [],     grantsOpenUntil: [],     users: [],     company: [null],   });

Avin Kavish Over a year ago

Okay, try new suggestion.

Collectives™ on Stack Overflow

Setting default static value in select option

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related