title: How can I make my formGroup default back to [ngValue]="null"?
body: <p>I'm working with Reactive Forms in Angular 6. I have a FormGroup that has a numerous select dropdown inputs. Each one has a default value if the user hasn't selected anything yet. These inputs are not required and the user may skip many of them if they are not applicable. After the user makes their selection and hit's the search button the values from the dropdown inputs are then added to the url via the router.navigate(). </p>
  
  <p>When the user navigates back to the page those values appear again via the route.snapshot.queryParamMap.get() in my ngOnInit() which is what I want. However, if the user skips any of the select inputs instead of showing the default value the select inputs show up blank. What I expected was the default value to show up again. I can see by console logging the providerForm object it's returning back everything as I'm expecting, but it doesn't look like the null is binding back to the [ngValue] How can I fix this?</p>
  
  <p>Below is the relevant code. My [formGroup]="providerForm" is on the top level form element not shown below.</p>
  
  <pre><code>&lt;section class="results__filters__section card"&gt;
                  &lt;div class="input-wrapper"&gt;
                      &lt;p class="t-title t-bold"&gt;Specialty&lt;/p&gt;
                      &lt;div class="input input--select u-fillRemaining"&gt;
                          &lt;select formControlName="specialty"&gt;
                              &lt;option [ngValue]="null"&gt;Select Specialty&lt;/option&gt;
                              &lt;option [value]="speciality" *ngFor="let speciality of options.specialities"&gt;{{speciality}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="input-wrapper"&gt;
                      &lt;p class="t-title t-bold"&gt;Language&lt;/p&gt;
                      &lt;div class="input input--select u-fillRemaining"&gt;
                          &lt;select formControlName="language"&gt;
                              &lt;option [ngValue]="null"&gt;Select Language&lt;/option&gt;
                              &lt;option [value]="language" *ngFor="let language of options.languages"&gt;{{language}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="input-wrapper"&gt;
                      &lt;p class="t-title t-bold"&gt;Gender&lt;/p&gt;
                      &lt;div class="input input--select u-fillRemaining"&gt;
                          &lt;select formControlName="gender"&gt;
                              &lt;option [ngValue]="null"&gt;Select Gender&lt;/option&gt;
                              &lt;option [value]="gender" *ngFor="let gender of options.gender"&gt;{{gender}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="input-wrapper"&gt;
                      &lt;p class="t-title t-bold"&gt;Distance&lt;/p&gt;
                      &lt;div class="input input--select u-fillRemaining"&gt;
                          &lt;select formControlName="distance"&gt;
                              &lt;option [ngValue]="null"&gt;Select Distance&lt;/option&gt;
                              &lt;option [value]="distance" *ngFor="let distance of options.distance"&gt;{{distance}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="input-wrapper"&gt;
                      &lt;p class="t-title t-bold"&gt;Hospital Affiliation&lt;/p&gt;
                      &lt;div class="input input--select u-fillRemaining"&gt;
                          &lt;select formControlName="affiliation"&gt;
                              &lt;option [ngValue]="null"&gt;Select Hospital&lt;/option&gt;
                              &lt;option [value]="affiliation" *ngFor="let affiliation of options.affiliation"&gt;{{affiliation}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>// component.ts </p>
  
  <pre><code>ngOnInit() {
      this.specialtyQuery = this.route.snapshot.queryParamMap.get('specialty');
      this.languageQuery = this.route.snapshot.queryParamMap.get('language');
      this.genderQuery = this.route.snapshot.queryParamMap.get('gender');
      this.distanceQuery = this.route.snapshot.queryParamMap.get('distance');
      this.affiliationQuery = this.route.snapshot.queryParamMap.get('affiliation');
      this.primaryCareQuery = this.route.snapshot.queryParamMap.get('primaryCare');
      this.accomodationsQuery = this.route.snapshot.queryParamMap.get('accomodations');
      this.newPatientsQuery = this.route.snapshot.queryParamMap.get('newPatients');
  
      this.providerForm = this.fb.group({
          specialty: this.specialtyQuery || null,
          language: this.languageQuery || null,
          gender: this.genderQuery || null,
          distance: this.distanceQuery || null,
          affiliation: this.affiliationQuery || null,
          primaryCare: this.primaryCareQuery || '',
          accomodations: this.accomodationsQuery || '',
          newPatients: this.newPatientsQuery || ''
      });
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/U6TXx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U6TXx.png" alt="enter image description here"></a></p>