Question

我正在尝试制作类似facebook之类的东西，现在我被困住了，因为我想在每个帖子上都有评论表格，以便用户可以在每个帖子上发表评论，但是由于这个原因，我必须确定要提交哪个帖子的评论表格，为此，我使用了以postId作为值的隐藏输入，但是当我分配表单控件时，我给表单控件分配了空值，因为我不知道该值是什么，这是现在的主要问题。我的模板，但是我想在formControls中动态分配数据，并坚持使用响应式表单方法。

这是我的代码：

<article class="post" *ngFor="let post of posts">

  <div class="post-body">

    <div class="post-content">
      {{ post.content }}
    </div>


    <div class="comment-area">
      <form class="comment-form" [formGroup]="commentForm" (ngSubmit)="onComment()">
        <img class="profile-pic" src="../../assets/profile.jpg">
        <input type="text" class="comment-input" formControlName="comment">

        <!-- Here is issue, value is inside post._id -->
        <input type="hidden" [value]="post._id" formControlName="postId">
        <button type="submit" class="comment-sub">Send</button>
      </form>
    </div>

  </div>
</article>

TS代码：

commentForm = new FormGroup({
        comment: new FormControl('', [PostValidator.notEmpty]),
        postId: new FormControl('', [Validators.required])
    });

Answer 1

您可以在单击“提交”时传递PostId，这将使您获得功能，然后可以保存它

<article class="post" *ngFor="let post of posts">    
  <div class="post-body">    
    <div class="post-content">
      {{ post.content }}
    </div>   
    <div class="comment-area">
      <form class="comment-form" [formGroup]="commentForm" (ngSubmit)="onComment(post._id)">
        <img class="profile-pic" src="../../assets/profile.jpg">
        <input type="text" class="comment-input" formControlName="comment">
        <button type="submit" class="comment-sub">Send</button>
    </div>    
  </div>

如何设置表单控制值如果在reactive表单方法中，formcontrol值位于ngFor循环内，

1 个答案: