title: Reactive Form Validators.Required not functioning on formControls
body: <p>Here is the mock data array i am looping over in my app.component.html</p>
  
  <pre><code>questions: [
  {question: 'Question-1'},
  {question: 'Question-2'},
  {{question: 'Question-3'}
  ]
  </code></pre>
  
  <p>In my app.component.ts as follows, Since i am using reactive form approach i have instantiated the Form Group and declare a formControl named 'note' which is declared as required:</p>
  
  <p>export class example {</p>
  
  <pre><code>regPresentationForm: FormGroup;
  
  this.regPresentationForm = new FormGroup ({
     note: new FormControl(null, Validators.required),
  });
  </code></pre>
  
  <p>}</p>
  
  <p>In my component HTML i am looping over the array and displaying the text field, therefore will have three text boxes each with <strong>note as my formControl</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container *ngFor = "let question of questions"&gt;
    &lt;textarea type="text" id="textArea" placeholder="Enter the Note" class="form-control" formControlName = "note"&gt;
    &lt;/textarea&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>Since the note formcontrol is required i am disabling the submit button like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="btn btn-primary" type="submit"[disabled] =  "!regPresentationForm.valid"&gt;
    Save &amp; Continue
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>PROBLEM:</strong></p>
  
  <p>The problem is the form get valid if i enter a text on the first text box therefore angular is considering it as a single box repeated thrice, which should not happen it should consider each note field seperately (3 instance of note formcontrol since the iteration is done thrice)</p>
  
  <p>No idea how to figure this out need helps.</p>
  
  <p>I hope i am clear. </p>