title: Angular 2 reactive forms field enable/disable
body: <p>I am trying to create a simple <strong>angular 2 reactive forms</strong> with email and phone number. Below is my code . I am facing two problems here.  </p>
  
  <ol>
  <li><p>Initially verify button should be disable. It should be enabled , only 
   when email field is entered.</p></li>
  <li><p>Second issue is I want to have only one field enabled at time. If 
   user starts typing in email, then phone number should be disabled and vice versa. Save button will be enabled either if email OR phone no is entered</p></li>
  </ol>
  
  <p>How do I achieve this?</p>
  
  <pre><code>&lt;form [formGroup]="personalDtlsForm"&gt;
    &lt;div class="form-group" [ngClass]="displayFieldCss('inputValue')"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;
          &lt;label for="inputValue" class="control-label required"&gt;Email&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-9"&gt;
          &lt;input type="text" id="email" class="form-control" formControlName="inputValue"&gt;
        &lt;/div&gt;
        &lt;div class="col-3"&gt;
          &lt;button type="button" id="verifyBtn" class="btn btn-primary btn-large" (click)="verify()"&gt;Verify&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="form-group row" [ngClass]="displayFieldCss('phoneNo')"&gt;
      &lt;div class="col paddingTop"&gt;
        &lt;label for="phoneNo" class="userID control-label textColor"&gt;Phone
        &lt;/label&gt;
        &lt;input type="number" class="form-control" id="phoneNo" formControlName="phoneNo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="viewdetailbtn"&gt;
      &lt;button type="button" [disabled]="!personalDtlsForm.valid" class="btn btn-primary btn-large btnwidth marginBottom" (click)="savePersonalDtls()"&gt;Save&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  
  this.personalDtlsForm = this.formBuilder.group({
    inputValue: [null, [Validators.required, Validators.email]],
        phoneNo: [null, Validators.required]
  });
  </code></pre>