title: How to get value of a FormControl in Angular4
body: <p>I have some experience in Angular4, but I just inherited a piece of code that uses FormControls, and I don't know how to work with them.  I am setting up a comments textarea that is required if the value of isRegulatoryAuditRequired equals false.  I've got the required field working, but I need to display the message 'Comments required' if value is false and the form is submitted.  Here is my HTML, with two radio buttons, a textarea and a label for the message:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;btnWrapper&quot;&gt;
    &lt;div class=&quot;leftBtn&quot;&gt;
      &lt;span class=&quot;col-xs-12 no-padding&quot;&gt;
        &lt;label&gt;
          &lt;input type=&quot;radio&quot; id=&quot;radio1&quot; class=&quot;app-input-radio&quot; name=&quot;isRegulatoryAuditRequired&quot; [value]=&quot;true&quot;
                 [checked]=&quot;isRegulatoryAuditRequired==true&quot; formControlName=&quot;isRegulatoryAuditRequired&quot; /&gt;
          &lt;span class=&quot;app-input-radio pull-left&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;plx5 pull-left radioText &quot;&gt;Yes&lt;/span&gt;
        &lt;/label&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div class=&quot;rightBtn&quot;&gt;
      &lt;span class=&quot;col-xs-12 no-padding&quot;&gt;
        &lt;label&gt;
          &lt;input type=&quot;radio&quot; id=&quot;radio2&quot; class=&quot;app-input-radio&quot; name=&quot;isRegulatoryAuditRequired&quot; [value]=&quot;false&quot;
                 [checked]=&quot;isRegulatoryAuditRequired==false&quot; formControlName=&quot;isRegulatoryAuditRequired&quot; /&gt;
          &lt;span class=&quot;app-input-radio pull-left&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;plx5 pull-left radioText &quot;&gt;No&lt;/span&gt;
        &lt;/label&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row mbx20&quot;&gt;
    &lt;div class=&quot;col-sm-4&quot;&gt;
      &lt;div&gt;
        &lt;label&gt;Why is the regulatory audit being performed or provide additional comment?&lt;/label&gt;
        &lt;div&gt;
          &lt;textarea id=&quot;comments&quot; name=&quot;Text1&quot; [required]=&quot;isRegulatoryAuditRequired==false&quot; cols=&quot;100&quot; rows=&quot;2&quot; formControlName=&quot;comments&quot;&gt;&lt;/textarea&gt;
          &lt;label *ngIf=&quot;commentsRequired('comments')&quot; style=&quot;color:red;font-weight:bold&quot;&gt;Comments required&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I need to evaluate the value of the 'isRegulatoryAuditRequired' and 'comments' FormControls to see if I should display the 'Comments required' message.  Here is the method I'm trying to use, but it isn't working:</p>
  <pre class="lang-ts prettyprint-override"><code>commentsRequired(controlName: string) {
    const control = (&lt;FormControl&gt;this.rotationForm.controls[controlName]);
    const isRegulatoryAuditRequired = (&lt;FormControl&gt;this.rotationForm.controls['isRegulatoryAuditRequired']);
    if (isRegulatoryAuditRequired.value === false &amp;&amp; control.value === '' &amp;&amp; this.formSubmitAttempt) {
      return true;
    } else {
      return false;
    }
  }
  </code></pre>
  <p>The value of 'isRegulatoryAuditRequired.value' and 'control.value' print to the console as null, which therefore doesn't display the message.  How do I retrieve these values?  Any help will be appreciated.</p>