title: Angular dropdown validation when the default value is set to '0'
body: <p>I have set default value  for 'Select' as '0' for my dropdown.</p>
  <p>Validation Rules</p>
  <p>1.Make the selection of dropdown as required.(Atleast select one option from the dropdown).</p>
  <p>2.If a value is not selected, then show an error saying that &quot;You need to select an option&quot;</p>
  <p>Things I have tried:</p>
  <p>Case 1:</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;col-12 col-md-6 col-lg-4&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;span class=&quot;plain-select&quot;&gt;
                  &lt;select class=&quot;form-control&quot; id=&quot;select101&quot; formControlName=&quot;UserId&quot;
                    [(ngModel)]=&quot;editFormData.userId&quot;&gt;
                    *****&lt;option value='0' selected&gt;Select&lt;/option&gt;*****
                    &lt;option *ngFor=&quot;let user of usernames&quot; value={{user.userId}}&gt;
                      {{user.usernames}}
                    &lt;/option&gt;
                  &lt;/select&gt;
                &lt;/span&gt;
                &lt;div
                  *ngIf=&quot;addUserForm.controls['UserId'].invalid &amp;&amp; (submited || ` addUserForm.controls['UserId'].dirty || addUserForm.controls['UserId'].touched)&quot;`
                  class=&quot;error-msg&quot;&gt;
                  &lt;div *ngIf=&quot;addUserForm.controls['UserId'].errors.required&quot;&gt;
                    UserId is required.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        
        
        TypeScript:
        
          UserId:  ['', [Validators.required, Validators.min(1)]],
          
          
  </code></pre>
  <p>**In the above case:</p>
  <pre><code>        I am able to see the default as &quot;Select&quot; but the validation doesn't work.
  </code></pre>
  <p>It doesn't give any validation error when no option is selected from the dropdown.</p>
  <p>Case-2 :</p>
  <pre><code> &lt;div class=&quot;col-12 col-md-6 col-lg-4&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;span class=&quot;plain-select&quot;&gt;
                  &lt;select class=&quot;form-control&quot; id=&quot;select101&quot; formControlName=&quot;UserId&quot;
                    [(ngModel)]=&quot;editFormData.UserId&quot;&gt;
                    &lt;option value='null' selected&gt;Select&lt;/option&gt;
                    &lt;option *ngFor=&quot;let user of usernames&quot; value={{user.userId}}&gt;
                      {{user.usernames}}
                    &lt;/option&gt;
                  &lt;/select&gt;
                &lt;/span&gt;
                &lt;div
                  *ngIf=&quot;addUserForm.controls['UserId'].invalid &amp;&amp; (submited || addUserForm.controls['UserId'].dirty || addUserForm.controls['UserId'].touched)&quot;
                  class=&quot;error-msg&quot;&gt;
                  &lt;div *ngIf=&quot;addUserForm.controls['UserId'].errors.required&quot;&gt;
                    UserId is required.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            
        
          TypeScript:
        
        
  
    UserId:  ['', [Validators.required, Validators.min(1)]],
          
          In the above case, the validation is working as expected but however the default value is not set to &quot;Select&quot; and also the validation works only if &quot;Select&quot; option is selected from the dropdown
          
          Case-3:
          
          Same happens when i select the value to &quot;undefined&quot;.
  </code></pre>