title: Angular 2 FormBuilder disable fields on checkbox select
body: <p>I have build angular cli project and have a form with checkbox. Some of the fields must disable on checkbox select.</p>
  <p>Form is as follows:</p>
  <p><a href="https://i.stack.imgur.com/CAC2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CAC2k.png" alt="enter image description here" /></a></p>
  <p>need to disable/enable password, new password and re type password fields on checkbox select event.</p>
  <p>Html</p>
  <pre><code>&lt;form [formGroup]=&quot;userProfileForm&quot; (ngSubmit)=&quot;submitForm(userProfileForm.value)&quot;&gt;
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt; {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; [formControl]=&quot;userProfileForm.controls['userName']&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label&gt;{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; [formControl]=&quot;userProfileForm.controls['displayName']&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label&gt;{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;text&quot; [formControl]=&quot;userProfileForm.controls['email']&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label class=&quot;checkbox-inline&quot;&gt;
                  &lt;input type=&quot;checkbox&quot; value=&quot;isResetPassword&quot; name=&quot;isResetPassword&quot; [formControl]=&quot;userProfileForm.controls['isResetPassword']&quot;&gt;  
                   {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label&gt;{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;password&quot; [formControl]=&quot;userProfileForm.controls['password']&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label&gt;{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;password&quot; [formControl]=&quot;userProfileForm.controls['newPassword']&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group &quot;&gt;
                  &lt;label&gt;{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}&lt;/label&gt;
                  &lt;input class=&quot;form-control&quot; type=&quot;password&quot; [formControl]=&quot;userProfileForm.controls['reTypePassword']&quot;&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>ts code</p>
  <pre><code>this.isResetPassword = true;
  this.userProfileForm = formBuilder.group({
      'userName': [null, [Validators.required]],
      'displayName': [null],
      'email': [null, [Validators.required]],
      'isResetPassword': this.isResetPassword,
      'password': [{
          value: null,
          disabled: this.isResetPassword
      }],
      'newPassword': [{
          value: null,
          disabled: this.isResetPassword
      }],
      'reTypePassword': [{
          value: null,
          disabled: this.isResetPassword
      }]
  })
  </code></pre>
  <p>Form has built inside the constructor.
  How can I disable/enable the above fields on check box select.</p>