title: How to use reactive forms within ngFor
body: <p>An array of users can have multiple elements (users). In a template, I iterate over this array and add a form for each element. Right now each form binds to the same form group values. If I fill out the form for the first user, submit buttons of all the forms become enabled. How to point each form to the unique formGroup or unique variables? </p>
  
  <p>component:</p>
  
  <pre><code>import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms';
  ...
  export class UserComponent implements OnInit {
   form: FormGroup;
   @input users: any[];
  
   constructor(private _fb: FormBuilder) {}
   ngOnInit() {
    this.form = this._fb.group({
     address: new FormControl('', [Validators.required]),
     phone: new FormControl('', [Validators.required]),
     });
   }
  
   add() {
     if (this.form.valid){
       // code
     }
   }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code> &lt;div *ngFor="let user if users"&gt;
    {{user.name}}
      &lt;form [formGroup]="form"  (ngSubmit)="add()"&gt;         
       &lt;div class="form-group"&gt;
         &lt;label&gt;Address:&lt;/label&gt;
         &lt;input formControlName="address" class="form-control"&gt;
         &lt;label&gt;Phone:&lt;/label&gt;
         &lt;input formControlName="phone" class="form-control"&gt;&lt;/input&gt;
       &lt;/div&gt;
       &lt;button type="submit" class="submit" [disabled]="!form.valid"&gt;Submit&lt;/button&gt;    
      &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>