title: How to bind angular form validation with ngFor
body: <p>Hello every one i am trying to do comment form validation, For every post there comment box like Facebook, but i am unable to bind the comment form with ngFor index with formControlName="comment", So please anyone help me </p>
  
  <p>I am already tried so many example but nothing will helped me .
  And i am my code below so check carefully and help me.</p>
  
  <pre><code>
  &lt;div class="container" style="width: 100%; height: 100%;  "&gt;
    &lt;div class="row" style=" margin: 1px; background-color: #fff; border: 2px solid #ada5a5; border-radius: 4px; "&gt;
      &lt;!-- ngFor for posts --&gt;
      &lt;div class="container" *ngFor="let post of posts; let i = index"&gt;
        &lt;!-- {{post.user_id}}, {{post.post_id}}, {{post.saved_name}}, {{ post.file_path}} --&gt;
        &lt;div class="
        row" style="border: 1px solid #e6e6e6;"&gt;
          &lt;div class="col-md-12 col-md-offset-0" style=" height: auto; "&gt;
            &lt;h6&gt; {{post.description}} &lt;/h6&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-12" style="display: block; "&gt;
  
            &lt;form [formGroup]="commentForm" (ngSubmit)="comment_Submit(post.user_id, post.post_id,
              commentForm )" name="commentForm{{i}}"&gt;
              &lt;div class="form-group"&gt;
                &lt;input type="text" class="form-control" name="comment{{i}}" formControlName="comment_{{i}}"
                  id="comment{{i}}" placeholder="Enter comments" spellcheck="true"
                  style="width:100%; height: auto; border: 1px solid #ada5a5; border-radius: 4px; outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word; "
                  [ngClass]="{'form-control': true,
                'is-invalid': !f.comment.valid,
                'is-valid':f.comment.valid}"&gt;
                &lt;!-- &lt;span *ngIf="f.comment.errors?.required &amp;&amp; f.comment.touched" class="text-danger"&gt;Field is required&lt;/span&gt; --&gt;
                &lt;div *ngIf="f.comment.errors?.minlength &amp;&amp; (f.comment.dirty || f.comment.touched)"
                  class="alert alert-danger"&gt; Comment should be at least 2 characters. &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--&lt;textarea name="Text1" cols="40" rows="5"&gt;&lt;/textarea&gt; (ngSubmit)="onSubmit(uploadForm)
                &lt;textarea name="comment" form="usrform"&gt;Enter text here...&lt;/textarea&gt;
                &lt;textarea rows=3 class="form-control form-input" type="text" formControlName="question"&gt;&lt;/textarea&gt;--&gt;
              &lt;button type="submit" class="btn-sm btn-success" [disabled]="!commentForm.valid"&gt;Comment&lt;/button&gt;
  
            &lt;/form&gt;  &lt;!---Form End--&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  Typescript Code:
  
  export class PostsComponent implements OnInit {
    // Set server = 'localhost:3000/';
    // apiUrl: string = 'localhost:3000';
    users: User[];
    user_id: string;
    posts: Post[];
    files: File[];
    post_id: any;
    saved_name = [];
    tmp_files = [];
  
    likes: Like[];
    like_id: number | null ;
    like_status: string;
    postLikes: any;
  
    comments: Comment[];
    comment_text: string;
    formsArr = [];
    commentForm: FormGroup;
  
     get f() { return this.commentForm.controls; }
  
    constructor(private userService: UserService, private http: HttpClient, private formBuilder: FormBuilder, private router: Router,
      private alerts: AlertsService) {
      this.userService.getUser_id()
        .subscribe(
          data =&gt; {
            this.user_id = data.toString();
            this.getPosts(this.user_id);
            this.getFiles(this.user_id);
            this.get_likes();
            this.getPostLikes(this.user_id);
            this.get_comments();
            // this.getPostsWithLikes();
          },
          error =&gt; this.router.navigate(['/login'])
          // this.router.navigateByUrl('/login');
        );
        this.commentFormValidation();
  
    }
  
    ngOnInit() {   }
  
      commentFormValidation() {
        // debugger
        this.commentForm = this.formBuilder.group({
        comment: ['', [Validators.required, Validators.minLength(2)] ]
       });
    }
  
  
  
    // Get user details from DB
    getPosts(user_id) {
      this.userService.getPosts(user_id).subscribe((data) =&gt; {
        this.posts = data;
      },
        error =&gt; {
          return console.log(error);
        }
      );
    }
  
  
  </code></pre>
  
  <p>By using above code i am getting validation to every comment box when i touched on one comment box, But i want only one validation to particular comment box which i touched.</p>