title: Ionic 3 FormBuilder, How to validate ion-select ion-option?
body: <p>In ionic 3, FormBuilder to check the validity of a form we use <strong>"form.valid"</strong> property of formGroup, which returns true if valid and false if invalid,</p>
  
  <p>My problem is when i am setting values from javascript, <strong>"form.valid"</strong> gives <strong>true</strong> even setting any value which is not given(available) in the options of the select control.</p>
  
  <p><strong>I want select control to be invalid if select values are different from the given option.</strong></p>
  
  <p>Here's the working <a href="https://plnkr.co/edit/wUY3fi?p=preview" rel="nofollow noreferrer">Plunker link</a>,</p>
  
  <p>Codes speaks better,</p>
  
  <p><strong>Here is the design part(page.html)</strong>,</p>
  
  <pre><code>&lt;button ion-button color="app" (click)="setval_valid()"&gt;Set valid values&lt;/button&gt;
    &lt;button ion-button color="app" (click)="setval()"&gt;Set Different invalid values&lt;/button&gt;
    &lt;form [formGroup]="knowledge" *ngIf="!retryButton"&gt;
          &lt;ion-list&gt;
                  &lt;ion-item&gt;
                      &lt;ion-label floating&gt;Educational Qualification Details &lt;span&gt;*&lt;/span&gt;&lt;/ion-label&gt;
                      &lt;ion-select formControlName="f2_edudetail" interface="popover" (change)="getTotal()"&gt;
                          &lt;ion-option value="illiterate"&gt; Illiterate &lt;/ion-option&gt; 
                          &lt;ion-option value="primary education"&gt; Education &lt;/ion-option&gt; 
                          &lt;ion-option value="matriculate"&gt; Matriculate &lt;/ion-option&gt; 
                          &lt;ion-option value="graduate"&gt; Graduate &lt;/ion-option&gt; 
                          &lt;ion-option value="post graduate"&gt; Post Graduate &lt;/ion-option&gt; 
                      &lt;/ion-select&gt;
                  &lt;/ion-item&gt;
                  &lt;div *ngIf="!knowledge.controls.f2_edudetail.valid  &amp;&amp; (knowledge.controls.f2_edudetail.dirty || submitAttempt)"&gt;
              &lt;p *ngIf="knowledge.controls.f2_edudetail.errors.required"&gt;This field is required.&lt;/p&gt;
          &lt;/div&gt;
  
  
                  &lt;ion-item&gt;
                      &lt;ion-label floating&gt;What Is Your Proficiency In English?&lt;span&gt;*&lt;/span&gt;&lt;/ion-label&gt;
                      &lt;ion-select formControlName="f2_proficiency" interface="popover"&gt;
                        &lt;ion-option value="fluent"&gt;Fluent&lt;/ion-option&gt;
                        &lt;ion-option value="read only"&gt;Read Only&lt;/ion-option&gt;
                        &lt;ion-option value="write only"&gt;Write Only&lt;/ion-option&gt;
                        &lt;ion-option value="speak only"&gt;Speak Only&lt;/ion-option&gt;
                        &lt;ion-option value="understand only"&gt;Understand Only&lt;/ion-option&gt;
                        &lt;ion-option value="Don't Know"&gt;Don't Know&lt;/ion-option&gt;
                      &lt;/ion-select&gt;
                  &lt;/ion-item&gt;
                  &lt;div *ngIf="!knowledge.controls.f2_proficiency.valid  &amp;&amp; (knowledge.controls.f2_proficiency.dirty || submitAttempt)"&gt;
              &lt;p *ngIf="knowledge.controls.f2_proficiency.errors.required"&gt;This field is required.&lt;/p&gt;
  
          &lt;/div&gt;
  
  
                  &lt;ion-item&gt;
                      &lt;ion-label floating&gt;Participation In Farming Programs&lt;/ion-label&gt;
                      &lt;ion-select formControlName="f2_participation" interface="popover" (ionChange)="setValidation()"&gt;
                        &lt;ion-option value="yes"&gt;Yes&lt;/ion-option&gt;
                        &lt;ion-option value="no"&gt;No&lt;/ion-option&gt;
                      &lt;/ion-select&gt;
                  &lt;/ion-item&gt;
          &lt;/ion-list&gt;     
      &lt;/form&gt;
  
      &lt;button ion-button color="app" (click)="save()"&gt;Save&lt;/button&gt;
  
      &lt;br&gt;&lt;br&gt;
  
      &lt;b&gt;{{validity}}&lt;/b&gt;
  </code></pre>
  
  <p><strong>Here is the TS part(page.ts)</strong>,</p>
  
  <pre><code>knowledge: FormGroup;
    validity:stirng = '';
  
    constructor(public navController: NavController, public formBuilder: FormBuilder) 
    {
      this.knowledge = formBuilder.group({
              'f2_edudetail' : ['', Validators.required], //drp
              'f2_proficiency' : ['', Validators.required], //drp
              'f2_participation' : [''], //drp
      });
  
    }
  
    setval(){
  
      let formData = [];
          formData['f2_edudetail']     = "Blah Blah";
          formData['f2_proficiency']   = "Blah Blah";
          formData['f2_participation'] = "Blah Blah";
  
      this.knowledge.setValue(formData);
      this.validity = '';
    }
  
    setval_valid(){
  
      let formData = [];
          formData['f2_edudetail']     = "illiterate";
          formData['f2_proficiency']   = "fluent";
          formData['f2_participation'] = "yes";
  
      this.knowledge.setValue(formData);
      this.validity = '';
    }
  
    save(){
      if (this.knowledge.valid){
        this.validity = "Valid (I want this to be invalid if select values are different from the given option)";
      }
      else{
        this.validity = "Invalid";
      }
    }
  </code></pre>