0

This link helped me to use placeholder in select box. So my code is

<form (ngSubmit)="onSubmit(form)" #form="ngForm" class="form-sample form-position">

<div class="form-group row">
  <label class="col-sm-3 col-form-label">Membership</label>
  <div class="col-sm-9">
    <select name="membership" [(ngModel)]="membership" class="form-control" required>
      <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>

      <option>Free</option>
      <option>Professional</option>
    </select>
  </div>
</div>

 <div class="form-group row">
      <label class="col-sm-3 col-form-label">State</label>
      <div class="col-sm-9">
        <select [(ngModel)]="state" class="form-control" name="state" required=""
          placeholder="Select">
          <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>
          <option *ngFor="let item of statesList">{{item}}</option>
        </select>
      </div>
    </div>

  <div class="text-center container-fluid form-group">
     <button [disabled]="!form.valid" type="submit" class="btn btn-primary btn-fw text-center">Submit</button>
     <button type="button" class="btn btn-secondary btn-fw" (click)="form.reset()">Clear</button>
  </div>
</form>

This is a small part of my code. The above code is working perfectly fine. When the page loads for the select field Membership default option Please select one option is selected.

But the problem is when i reset the form the text Please select one option also gets cleared. But I want this default option to remain selected after the form get reset. to reset the form I use form.reset().

Abhiz
  • 970
  • 1
  • 16
  • 36

3 Answers3

4

form.reset() sets null values to underlying models. since your assign undefined as value to default options, they doesn't match. either provide a custom logic for clearing the form and set model values to undefined on reset;

<button type="button" class="btn btn-secondary btn-fw" (click)="clearForm()">Clear</button>

and in your component.ts

clearForm() {
  this.membership = undefined;
  this.state = undefined;
}

OR

change you option values and initial values of corresponding models to null 

<option [ngValue]="null" disabled selected hidden> Please select one option </option>

and in your component.ts

membership = null;
state = null;

here is a demo for second one https://stackblitz.com/edit/angular-ngvh9p

ysf
  • 4,634
  • 3
  • 27
  • 29
  • When i am setting membership or state to null, the default text `Select one option ` is not visible even at the time of page load, i.e for the first time also its not visible. – Abhiz Jul 09 '19 at 11:41
  • you have to assign their initial values to `null` as well, for default values to be selected on first load. it is done exactly like that in the demo above. – ysf Jul 09 '19 at 11:43
  • `membership = null;` and `state = null;` when you first define them in your ts file. – ysf Jul 09 '19 at 11:44
  • I did the same. and in this case ,`Select one option` is not visible in the view – Abhiz Jul 09 '19 at 11:46
  • 1
    did you set `[ngValue]="null"` in your html? like `` – ysf Jul 09 '19 at 11:48
  • 1
    Yesh.. its worked.. Thanks .. I was missing this part.. Thank you so much – Abhiz Jul 09 '19 at 11:51
0

If you have changed the value in the select, you need to set the value of membership to undefined when the form is reset. I don't know what form.reset() does, but it might set the value to null.

Thor Jacobsen
  • 8,621
  • 2
  • 27
  • 26
0

I had a similiar issue.

Opening the page in a new tab showed the placeholder/default value on initial loading then leaving the page and returning, it was blank.

I had to add [ngValue = "null"] and also set the value in my model initially to 'null'.

Only after that it showed up.

Buggy code: 

<select name="title" [(ngModel)]="model.title">
    <option selected disabled> PLACEHOLDER </option>
    <option *ngFor="let title of titles" [value]="title"> title </option>
</select>

In component.ts initial value was set to model.title = '', which is 'undefined'.

Fixing the code was through adding the explicit ngValue and setting it to 'null':

<select name="title" [(ngModel)]="model.title">
    <option [ngValue]="null" selected disabled> PLACEHOLDER </option>
    <option *ngFor="let title of titles" [value]="title"> title </option>
</select>

and also setting the initial value of model.title = null.

mfbayrarian
  • 1
  • 2