CODEWITHSUNDEEP
angularangular-reactive-forms
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Set default value to select with reactive forms

I have some function like this:

cancel(): void {
  this.form.reset();
  this.router.navigate([], { queryParams: { activeOnly: false } });
}

And in html like this:

<select class="form-control-sm" id="select-process-type" formControlName="processType">
    <option [selected]="!form.get('processType').value" disabled>
        {{'type' | translate}}
    </option>
    <option [value]="'1'" [innerHTML]="'1' | translate">
    </option>
    <option [value]="'2'" [innerHTML]="'2' | translate">
    </option>
    <option [value]="'3'" [innerHTML]="'3' | translate">
    </option>
</select>

The problem I have is that when I call

  this.form.reset();

It clear all value with form, not even first is diplayed, because first option i use like placeholder

Here what it should look

enter image description here

And this is what it does

reactive

Upvotes: 2

Views: 136

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Set [value]="null" in the default option.

Try like this:

<option [selected]="!form.get('processType').value" [value]="null" disabled>
    {{'type' | translate}}
</option>

Upvotes: 1

Related Questions